用于顺序更新的反应模式一系列数据相关组件

Question

我有4个组件，它们是下拉列表，当从一个组件中选择一个值时，它会加载第二个组件的数据，依此类推......

我有一些工作做类似......（为了简洁，请注意省略其余的代码）

render() {
    let dropdown1 = this.state.dropdown1.map(drop1 => {
        return (
                <option key={drop1.id} value = {drop1.id}>{drop1.name}</option>
        )
    })
    return (
        <div>
            <select value={this.state.value} onChange={this.handleChange}>{dropdown1}</select>
            {this.state.value ? <Dropdown2 id={this.state.value} /> : null}
        </div>
    )

所以Dropdown1呈现自身并且有条件地提供以下下拉等等......虽然这种方法有效，但更新Dropdown1将更新Dropdown2 - 更改不会传播到下一个组件之外。

是否有更好的模式可用于更新组件层次结构？