Question

我终于从jQuery切换到ReactJS，这让我重新思考了一些基本原理。

在这种情况下，我有一个带有三个视图和三个相应导航按钮的仪表板。当我单击其中一个按钮时，我想显示相应的视图并隐藏其他两个视图。

从编程上讲，这很容易，但我想确保我在React＆＃34;中思考。并学习正确的方法论。

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

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

像react-router这样的库将是一个功能更全面的解决方案，但对于您的用例可能有点过分。通过记住反应组件基本上是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>
    );
}
});

Answer 2

您可以在render函数中执行此操作：

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

在ReactJS中显示/隐藏视图的正确方法是什么？

2 个答案: