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

Question

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

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

这是我正在尝试做的事情的图:

基本上，在我单击的每个选项中，我希望在 <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>
        );
}

}

导出类 Help 扩展组件{

渲染(){

   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 />等等。据我所知，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')
);