Javascript 动态显示React组件的子级？

我正在尝试制作一个简单的下拉列表，当单击相应的按钮时，它将加载到特定的ul中。似乎有很多正确和不正确的方法来实现这一点。目前我有两个不同的ul：AddMenu和RefsMenu。当我点击AddMenu中的链接时，它将完全删除该ul并将其替换为RefsMenu。我一次只希望加载一个子组件，这样每次选择新视图时都可以有效地替换实体

到目前为止，我已经：

<Dropdown open={ false } currentView={ this.state.currentView } onClick={ this.handleView }>
    <AddMenu title="Add Menu" selected={ false }/>
    <AddRefs title="Add Refs" selected={ false } />
</Dropdown>

---

我曾考虑过使用this.props.children，但我不认为它会返回实例，所以我不确定从哪里开始。我离这里很远吗？

如果下拉组件知道要显示的当前视图（这似乎是因为您的代码引用

currentView={this.state.currentView}

），那么在渲染方法中，您可以使用该信息有条件地渲染子级

例如,

render: function() {
    return (<div>
        {this._getCurrentViewItem()}
    </div>);
},
_getCurrentViewItem: function() {
    var foundChild;
    React.Children.forEach(function(child) {
        if (child.props.view === this.props.currentView) {
            foundChild = child;
        }
    });
    return foundChild;
}

render:function（）{
返回(
{this.\u getCurrentViewItem（）}
);
},
_getCurrentViewItem:函数（）{
var foundChild；
React.Children.forEach（函数（子函数）{
if（child.props.view==this.props.currentView）{
foundChild=儿童；
}
});
返回儿童；
}

要实现这一点，您只需要指定每个子组件适用于哪个视图

<Dropdown open={ false } currentView={ this.state.currentView } onClick={this.handleView }>
    <AddMenu title="Add Menu" view="refsView"/>
    <AddRefs title="Add Refs" view="menuView" />
</Dropdown>

<Dropdown open={ false } currentView={ this.state.currentView } onClick={this.handleView }>
    <AddMenu title="Add Menu" view="refsView"/>
    <AddRefs title="Add Refs" view="menuView" />
</Dropdown>