在 ReactJS 中 show/hide 视图的正确方法是什么？

Question

我终于从 jQuery 切换到 ReactJS，这让我重新思考一些基础知识。

在本例中，我有一个包含三个视图和三个相应导航按钮的仪表板。当我点击其中一个按钮时，我想显示相应的视图并隐藏其他两个视图。

从程序上讲，这很容易，但我想确保我 "thinking in React" 并学习了正确的方法。

此代码有效，但看起来臃肿。有什么建议吗？

var Views = React.createClass({
changeView: function (event) {
    var view = $(event.target).text();
    if(view == 'Audience') {
        this.setState({
            displayAudience: true,
            displayMetrics: false,
            displaySettings: false
        })
    }
    if(view == 'Metrics') {
        this.setState({
            displayAudience: false,
            displayMetrics: true,
            displaySettings: false
        })
    }
    if(view == 'Settings') {
        this.setState({
            displayAudience: false,
            displayMetrics: false,
            displaySettings: true
        })
    }
},
getInitialState: function () {
    return {
        displayAudience: true,
        displayMetrics: false,
        displaySettings: false
    };
},
render: function () {
    return (
        <div className="table">
            <div className="cell top col-15">
                <ul className="navigation">
                    <li onClick={this.changeView}>Audience</li>
                    <li onClick={this.changeView}>Metrics</li>
                    <li onClick={this.changeView}>Settings</li>
                </ul>
            </div>
            <div className="cell top col-85 view">
                { this.state.displayAudience ? <Audience /> : null }
                { this.state.displayMetrics ? <Metrics /> : null }
                { this.state.displaySettings ? <Settings /> : null }
            </div>
        </div>
    );
}
});

Answer 1

您可以在 render 函数中这样做：

render: function () {
    var child = this.state.showP ? (<p></p>) : ();
    return (
        <div>
            {child}
        </div>
    );
}

Answer 2

像 react-router 这样的库将是一个功能更全面的解决方案，但对于您的用例来说可能有点过分了。通过记住 React 组件基本上是 javascript 对象，可以稍微简化您的示例。

var Views = React.createClass({
changeView: function (viewComponent) {
    this.setState({
        currentView: viewComponent
    });
},
getInitialState: function () {
    return {
        currentView: <Audience/>
    };
},
render: function () {
    return (
        <div className="table">
            <div className="cell top col-15">
                <ul className="navigation">
                    <li onClick={this.changeView.bind(null, <Audience/>)}>Audience</li>
                    <li onClick={this.changeView.bind(null, <Metrics/>)}>Metrics</li>
                    <li onClick={this.changeView.bind(null, <Settings/>)}>Settings</li>
                </ul>
            </div>
            <div className="cell top col-85 view">
                {this.state.currentView}
            </div>
        </div>
    );
}
});

在 ReactJS 中 show/hide 视图的正确方法是什么？

What's the correct way to show/hide views in ReactJS?

javascript

reactjs