穿越孩子的孩子并为所有输入添加功能,同时保持其他孩子不受影响

Question

我一直试图让它工作一段时间而不确定如何做以下事情.我的表单组件包含包含常规html标记和输入的子项.如果孩子是输入我想添加attachToForm和detachFromForm功能.如果它不是输入,我想继续遍历子项以确保该元素没有子输入字段.无论元素是否输入,我仍然希望它出现在我的页面上,我只想将这些函数添加到输入中.

问题是我只能让我的函数只返回输入,删除标签和标题.我知道这是因为我只添加了带有输入的元素到newChildren,但是如果我推动其他元素在else if部分我得到重复,我可以想到另一种方式来做到这一点.我不确定我是不是不了解基本的JS或者有大脑缺口.

React.Children.forEach(children, function(child) {
        var current = child;
        if (child.props && child.props.name) {
            this.newChildren.push(React.cloneElement(child, {
                detachFromForm: this.detachFromForm,
                attachToForm: this.attachToForm,
                key: child.props.name
            }));
        } else if (child.props && child.props.children){
            this.newChildren.push(child);
            this.registerInputs(child.props.children);
        } else {
            *need to keep track of parent elements and elements that do not have inputs
        }
    }.bind(this));

编辑:不确定是否需要,但这是和遍历的示例形式

return ( 
            <Modal className="_common-edit-team-settings" title={`Edit ${this.props.team.name}`} isOpen={this.props.modalIsOpen && this.props.editTeamModal} onCancel={this.props.toggleEditTeamModal} backdropClosesModal>

                <Form onSubmit={this.saveChanges}>      
                    <FormSection className="edit-team-details" sectionHeader="Team Details">
                        <FormField label="Name">
                            <Input name="name" value={this.state.values.name} onChange={this.handleInputChange} type="text" placeholder={this.props.team.name}/>
                        </FormField>
                        <FormField label="Mission">
                            <Input name="mission" value={this.state.values.mission} onChange={this.handleInputChange} type="text" placeholder={this.props.team.kitMission || 'Kit Mission'} multiline />
                        </FormField>
                    </FormSection>

                    <FormSection className="privacy-settings" sectionHeader="Privacy Settings">
                        <FormField label="Included in global search results" >
                            <SlideToggle name="globalSearch" defaultChecked={this.state.values.globalSearch} onChange={this.handleCheckedChange} type="checkbox" />
                        </FormField>
                        <FormField label="Accessible by anyone" >
                            <SlideToggle name="public" defaultChecked={this.state.values.public} onChange={this.handleCheckedChange} type="checkbox" />
                        </FormField>
                        <FormField label="Secured with WitCrypt" >
                            <SlideToggle name="witcryptSecured" defaultChecked={this.state.values.witcryptSecured} onChange={this.handleCheckedChange} type="checkbox" />
                        </FormField>
                    </FormSection>
                    <FormSection sectionHeader="Participants">
                        {participantsList}
                        <div id="add-participant" className="participant" onClick={this.toggleAddParticipantModal}>
                            <span className="participant-avatar" style={{backgroundImage:'url(/img/blue_add.svg)'}}></span>
                            <span>Add a Participant</span>
                            <span className="add-action roll"><a></a></span>
                        </div>
                    </FormSection>
                    <Button type="hollow-primary" size="md" className="single-modal-btn" block submit>Save</Button>
                </Form>


                <AddParticipant people={this.props.people} toggleAddParticipantModal={this.props.toggleAddParticipantModal} modalIsOpen={this.props.modalIsOpen} toggleAddParticipantModal={this.toggleAddParticipantModal} addParticipantModal={this.state.addParticipantModal} />
            </Modal>
        );

顺便说一句,我开始时想要做以下事情更简单但得到:

"无法添加属性attachToForm,对象不可扩展"

如果有人知道为什么请让我知道.

registerInputs: function (children) {

    React.Children.forEach(children, function (child) {

      if (child.props.name) {

        child.props.attachToForm = this.attachToForm;
        child.props.detachFromForm = this.detachFromForm;
      }

      if (child.props.children) {
        this.registerInputs(child.props.children);
      }
    }.bind(this));
  }

Answer 1

从错误消息判断，你遇到了不可变对象的问题prop。从 React 0.14 开始，它prop被“冻结”：

该props对象现在已被冻结，因此不再支持在创建组件元素后改变 props。在大多数情况下，React.cloneElement应该使用它来代替。此更改使您的组件更易于推理，并支持上述编译器优化。

关于此的博客文章

因此，在代码中的某个地方，您尝试扩展prop导致错误的对象。

您可以将交互的不同部分prop与try..catch构造结合起来，这将为您指出确切的问题所在。