javascript - React.js 在渲染子类时意外地重用了 data-reactid

Question

我有一个 Questionnaire 对象，它呈现多个 QuestionnaireOption 子类。当父 Questionnaire 对象中的状态发生变化时，将呈现新的 QuestionnaireOption 子类。

QuestionnaireOption 类在其“选择”与否时保持状态。

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

我该怎么做才能解决这个问题？

相关代码如下:

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

Answer 1

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

Each child in an array should have a unique "key" prop. Check the render method of App. See fb.me/react-warning-keys for more information.

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

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

如果其中一个与之前的渲染不匹配，则 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 是一个实现细节，可能随时更改或删除。

^{* 如果您只是更改项目的顺序，它会尝试只更改顺序以提高性能。目前在某些情况下不会发生这种情况，因此不应依赖它。}