javascript - React.js 在渲染子类时无意中重用 data-reactid

我有一个 Questionnaire 对象，它呈现几个 QuestionnaireOption 子类。当父 QuestionnaireOption 对象中的状态发生变化时，会呈现新的 Questionnaire 子类。
QuestionnaireOption 类在其“已选择”与否时保持状态。

问题: 当我更改父类中的状态以呈现新的“Option”节点时，新节点被分配了相同的 data-reactid ，我希望 Option 节点重置其内部状态，但它没有被分配new id 并且它包含错误的状态(在这种情况下，尽管使用新数据设置了 props，但在新对象上 selected 仍然设置为 true)。

我可以做些什么来解决这个问题？

这是相关的代码:

QuestionnaireOption = React.createClass({
    getInitialState: function() {
        return {selected: false}
    },
    handleClick: function(e) {
        e.preventDefault();
        this.setState({selected: !this.state.selected});
    },
    render: function() {
        var fullClassName = "questionnaireOption " + (this.state.selected? "selected": "unselected");
        return (
            <div className='questionnaireOptionWrapper large-4 small-4 columns'>
                <div className={fullClassName} onClick={this.handleClick}>
                    <div>{this.props.name}</div>
                </div>
            </div>
        );
    }
});

Questionnaire = React.createClass({
    getInitialState: function() {
        return {currentStage: 0}
    },
    saveOptionState: function() {
        // dump option state into amber.js or localstorage
    },
    advanceWizard: function() {
        this.saveOptionState();
        this.setState({currentStage: this.state.currentStage + 1});
    },
    rewindWizard: function() {
        this.saveOptionState();
        this.setState({currentStage: this.state.currentStage - 1});
    },
    seeResults: function() {
        console.log(globalOptionState);
    },
    render: function() {
        var currentWizardQuestion = wizardQuestions[this.state.currentStage];
        var currentOptionNodes = currentWizardQuestion.options.map(function(option) {
            node = (
                <QuestionnaireOption
                    name={option.name}
                    value={option.value}
                />
            );
            return node;
        });

        return (
            <div className="questionnaire row">
                <div className="questionnaire-question large-8 small-12 columns">
                    <div className="questionnaire-question-text">
                        {currentWizardQuestion.text}
                    </div>
                    <div className="questionnaire-question-subtext">
                        {currentWizardQuestion.subtext}
                    </div>
                    <div className="row">
                        {currentOptionNodes}
                    </div>

                    <input type="button" value="Back" onClick={this.rewindWizard}
                        style={this.state.currentStage == 0? {display: "none"}: {}
                    } />

                    <input type="button" value="Next" onClick={this.advanceWizard}
                        style={this.state.currentStage == wizardQuestions.length - 1?
                            {display: "none"}: {}
                    } />

                    <input type="button" value="Finish" onClick={this.seeResults}
                        style={this.state.currentStage < wizardQuestions.length - 1?
                            {display: "none"}: {}
                    } />
                </div>
            </div>
        );
    }
});

最佳答案

在您的控制台中，您会收到以下警告:



如果不这样做，则说明您没有使用开发版本:您应该修复它。

React 使用两件事来确定渲染之间是否“相同”:组件类(例如 QuestionnaireOption)和关键 Prop 。

如果其中一个与之前的渲染不匹配，则 react 认为它不同，并重新创建实例*并丢弃子树 dom。

假设 option.name 可用于确定相等性，请将代码更改为:

    var currentOptionNodes = currentWizardQuestion.options.map(function(option) {
        var node = (
            <QuestionnaireOption
                name={option.name}
                value={option.value}
                key={option.name}
            />
        );
        return node;
    });

作为引用，reactid 是一个实现细节，可能随时更改或删除。

* 如果您只是更改项目的顺序，它会尝试仅更改性能顺序。目前在少数情况下不会发生这种情况，因此不应依赖它。

关于javascript - React.js 在渲染子类时无意中重用 data-reactid，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28162860/