reactjs - 1 つの子のみを再レンダリングする

Question

私のフォームには、いくつかのドロップダウン コンポーネントがあります。最初のドロップダウン オプションが変更されるたびに、2 番目のドロップダウンの小道具を更新して再レンダリングしたいと考えています。私のコードは次のようになります

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

ただし、小道具は変更されないため、同じオプションが再レンダリングされます。現時点では、新しい状態を設定してフォーム全体を再レンダリングしています。新しい小道具で1つの子/ドロップダウンのみを再レンダリングする方法はありますか?