如何在React JS中创建多页面应用程序

Question

我想创建一个多页面程序，其中有4个主题供用户选择。当用户点击任何特定主题时，它将显示该特定主题页面内容。每个主题将包含2-3页，下一个上一个按钮。用户可以选择一个或多个主题。当查看所有选定的主题时，用户将被重定向回主题选择页面，其中已查看的主题显示为灰色。我以前使用jQuery创建了这样的程序，然而，我很难以反应的方式去做。该URL将保持不变。我面临的主要问题是在点击事件上显示/隐藏组件，其中嵌套了2-3个级别。我尝试使用道具，但它似乎只适用于亲子关系。

var topicsPage = [
    { 
        topic_no: '1',
        topic_page_no: '1',
        headline: 'Topic 1 headline', 
        description: 'Topic 1 description comes here...', 
        first_topic_page: true,
        last_topic_page: false
    },
    { 
        topic_no: '2',
        topic_page_no: '2',
        headline: 'Topic 2 headline', 
        description: 'Topic 2 description comes here...', 
        first_topic_page: false,
        last_topic_page: false
    },
    { 
        topic_no: '3',
        topic_page_no: '3',
        headline: 'Topic 3 headline', 
        description: 'Topic 3 description comes here...', 
        first_topic_page: false,
        last_topic_page: false
    },
    { 
        topic_no: '4',
        topic_page_no: '4',
        headline: 'Topic 4 headline', 
        description: 'Topic 4 description comes here...', 
        first_topic_page: false,
        last_topic_page: true
    }
];

var MainContainer = React.createClass({

    render: function() {    
        return (
            <div className="container">
                <TopicsList />
                <SelectedTopicPage />
            </div>
        );
    }
});


var TopicsList = React.createClass({

    onClick: function () {

    },

    render: function () {
        return (
            <div className="row topic-list">
                <SingleTopicBox 
                    topicID="1" 
                    onClick={this.onClick} 
                    label="Topic"
                    />
                <SingleTopicBox 
                    topicID="2" 
                    onClick={this.onClick} 
                    label="Topic"
                    />
                <SingleTopicBox 
                    topicID="3" 
                    onClick={this.onClick} 
                    label="Topic"
                    />
                <SingleTopicBox 
                    topicID="4" 
                    onClick={this.onClick} 
                    label="Topic"
                    />
            </div>
        );
    }
});


var SingleTopicBox = React.createClass({

    render: function () {
        return (
            <div>
                <div className="col-sm-2">
                    <div onClick={this.props.onClick.bind(null, this)} className="single-topic" data-topic-id={this.props.topicID}>
                        {this.props.label} {this.props.topicID}
                    </div>
                </div>
            </div>
        );
    }
});



var SelectedTopicPage = React.createClass({

    render: function() {    
        return (
            <div className="topics-page">
                <h1>{this.props.headline}</h1>
                <p>{this.props.description}</p>
            </div>
        );
    }
});


ReactDOM.render(<MainContainer />, document.getElementById('main-container'));