javascript - 遍历 children 的 children 并为所有 input 添加函数，同时保持其他 children 不变

Question

我一直在尝试让它工作一段时间，但不确定如何执行以下操作。我的表单组件有包含常规 html 标记和输入的子组件。如果 child 是输入，我想添加 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>
        );

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

"Can't add property attachToForm, object is not extensible"

如果有人知道为什么请告诉我。

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 被“卡住”:

The props object is now frozen, so mutating props after creating a component element is no longer supported. In most cases, React.cloneElement should be used instead. This change makes your components easier to reason about and enables the compiler optimizations mentioned above.

Blog post on this

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

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