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

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

导出 class 帮助面板扩展组件{

render(){

        return (

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

}

export class 帮助扩展组件{

渲染(){

   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')
);

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

Can I use a menu or buttons to switch react components on a single page app?

javascript

single-page-application

reactjs

react-router