动态显示React组件的子代吗？

Question

我试图做一个简单的下拉菜单，当单击相应的按钮时，该下拉菜单会加载到特定的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>

所以我很困惑的是...如何选择要显示/渲染的主体元素？ 我想我可以有一个处理程序说：

handleView: function(component, e) {
    this.state.currentView = e.target.value;
}

handleSelected: function() {
    selected += true;
}

我已经考虑过使用this.props.children，但是我不认为该实例会返回实例，因此我不确定从哪里开始。 我要走吗？

Answer 1

如果DropDown组件了解要显示的当前视图（之所以出现，是因为您的代码引用currentView={this.state.currentView} ），那么在您的render方法中，您可以使用该信息有条件地渲染子级。

举个例子，

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

为了完成这项工作，您只需要指定每个子组件适用于哪个视图。

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