Question

在我的表单中我有一些下拉组件。每当第一个下拉选项更改时，我想更新第二个下拉列表的道具并重新渲染它。我的代码看起来像这样

handleProjectChange(option) {
    //this.setState({ selectedProject: option })
    this.refs.phase.props = option.phases;
    //this.refs.forceUpdate()
    this.refs.phase.render()
}

render() {
    var projectOptions = this.projectOptions
    var defaultProjectOption = this.state.selectedProject
    var phaseOptions = defaultProjectOption.phaseOptions
    var defaultPhaseOption = phaseOptions[0]
    var workTypeOptions = api.workTypes().map(x => { return  { value: x, label: x } })
    var defaultWorkTypeOption = workTypeOptions[0]
    return (
        <div>
            <Dropdown ref='project' options={projectOptions} value={defaultProjectOption} onChange={this.handleProjectChange.bind(this)} />
            <Dropdown ref='phase' options={phaseOptions} value={defaultPhaseOption} />
            <Dropdown options={workTypeOptions} value={defaultWorkTypeOption} />                
            <button className="btn btn-primary"  onClick={this.handleAddClick.bind(this)}>Add</button>
        </div>
    )
}

但是道具没有改变，所以它重新提出了相同的选择。目前我只是通过在其上设置新状态来重新渲染整个表单。有没有办法只用一个新的道具重新投降一个孩子/下拉？

Answer 1

执行此操作的方法是将所选选项置于第一个下拉列表selectedProject状态。

在渲染功能中，根据所选项目，在第二个下拉列表中获取/填充选项。

流程将是：

用户在第一个下拉列表中选择一个选项。
这会触发handleProjectChange()
在handleProjectChange()内，新选择的选项通过this.setState()调用
由于状态发生了变化，因此反应会重新运行整个render()函数。
在幕后，反应确定只有第二个下拉列表已经改变，因此反应只会重新渲染屏幕/ DOM中的第二个下拉列表。

Answer 2

尽管React确实有一个对帐算法，可以动态检查每个组件在其父对象的每次渲染中是否都应重新发布，但它并不总是按我们的预期工作。

https://reactjs.org/docs/reconciliation.html

对于此类问题，您有两种选择。您可以使用React.pureComponent或React.useMemo（）。

React只退还一个孩子

2 个答案: