我可以使用菜单或按钮在单页应用程序上切换反应组件吗？

Question

这在某种程度上是this thread 的延续，因为我找到了一种更好的方式来表达我的问题。

我想要做的就是按下侧面菜单上的一个按钮，这将在屏幕的另一部分切换一个反应组件。目前我的应用程序包含嵌套路由，但我不知道如何从嵌套菜单更新组件。

这是我正在尝试做的画：

基本上，在我单击的每个选项中，我都希望在 <HelpPanel/> 部分呈现不同的组件，或者至少需要完全不同的信息（我有不同的图表、图像等需要显示）。

最初我试图通过嵌套路由来完成它，但达到了我被卡住的地步，不知道如何根据用户单击的项目更新我的<HelpPanel/> 组件。这是当前的相关代码：

//app.js
ReactDOM.render(

<Router history={hashHistory}>
<Route path="/" component={App} handler={App}>
    <IndexRoute component={Index}/>
    <Route path="about" component={About}>
    </Route>
    <Route path="help" component={Help}>
        <Route path="help/:helpOption" component={HelpPanel}/>

    </Route>

</Route>
</Router>,
destination
);

//help.js

导出类 HelpPanel 扩展组件{

render(){

        return (

            <div>{this.props.params.helpOption}</div>
        );
}

}

导出类帮助扩展组件{

渲染(){

   return (
       <Grid>
            <Title/>
           <Row className="show-grid">
               <Col lg={2} md={4} sm={4}>
                    <HelpMenu/>
               </Col>
               <Col lg={8} md={8} sm={8}>
                    {this.props.children || "Please select topic from the menu for more information"}
               </Col>

           </Row>
       </Grid>
   );

} }

Answer 1

我已经为这个任务构建了解决方案。不完美，但它有效。
看看http://codepen.io/dagman/pen/gwzBjX。
所以当你点击option2<HelpPanel2 />替代<HelpPanel1 />等等。 Afaik react-router 是关于在指定的 url 路径匹配时加载组件。

    class HelpPage extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                panelIndex: 0
            };
        }

    getBtnId = (e) => {
        if(e.target && e.target.nodeName == "BUTTON") {
            console.log(e.target);
            this.setState({
                panelIndex: Number(e.target.id)
            });
      }
    };

    render() {
        return (
            <div className="container">
                <HelpMenu
                    getBtnId={this.getBtnId}
                />
                <HelpPanels
                    panelIndex={this.state.panelIndex}
                />
            </div>
        )
    }
}

const HelpMenu = ({ getBtnId }) => {
    return (
        <div 
            className="btnGroup"
            onClick={getBtnId}
        >
            <button id="0">Option 1</button>
            <button id="1">Option 2</button>
            <button id="2">Option 3</button>
            <button id="3">Option 4</button>
        </div>
    );
};

class HelpPanels extends React.Component {

    render() {
        const panels = [
            <HelpPanel1 />,
            <HelpPanel2 />,
            <HelpPanel3 />,
            <HelpPanel4 />
        ];
        const correctPanel = panels[this.props.panelIndex];
        return (
            <div className="panel-box">
            {correctPanel}
            </div>
        );
    }
}

const HelpPanel1 = () => (
    <h1>Panel for Option 1</h1>
);
const HelpPanel2 = () => (
    <h1>Panel for Option 2</h1>
);
const HelpPanel3 = () => (
    <h1>Panel for Option 3</h1>
);
const HelpPanel4 = () => (
    <h1>Panel for Option 4</h1>
);

ReactDOM.render(
    <HelpPage />,
    document.getElementById('root')
);