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: 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>

动态显示React组件的子项？

1 个答案: