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));

编辑：不确定是否需要，但这是示例表格im traversing

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被冻结＆＃34;：

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

Blog post on this

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

您可以将prop互动的不同部分与try..catch结构包装在一起，这将指出确切的问题所在。

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

1 个答案: