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

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

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

下面是我正在尝试做的一张图：

基本上，在单击每个选项时，我希望在

部分呈现不同的组件，或者至少呈现完全不同的信息（我需要显示不同的图表、图像等）

起初，我试图通过嵌套的路由来完成，但到了一个地步，我被卡住了，不知道如何根据用户单击的项目更新我的

组件。以下是当前的相关代码：

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

//app.js
ReactDOM.render(
,
目的地
);

//help.js

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

render(){

        return (

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

render（）{
返回(
{this.props.params.helpOption}
);
}

}

导出类帮助扩展组件{

render(){

        return (

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

render（）{

返回(
{this.props.children | |“有关详细信息，请从菜单中选择主题”}
);

}

---

}

我有此任务的生成解决方案。虽然不完美，但很有效。
请查看。
因此，当您单击

选项2

替代

等。Afaik react路由器是关于在指定的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.Component{
建造师（道具）{
超级（道具）；
此.state={
面板索引：0
};
}
getBtnId=（e）=>{
if（e.target&&e.target.nodeName==“按钮”）{
console.log（如target）；
这是我的国家({
panelIndex:编号（e.target.id）
});
}
};
render（）{
返回(
)
}
}
常量帮助菜单=（{getBtnId}）=>{
返回(
选择1
选择2
选择3
选择4
);
};
类帮助面板扩展React.Component{
render（）{
常数面板=[
,
,
,
];
const correctPanel=panels[this.props.panelIndex]；
返回(
{校正面板}
);
}
}
常量帮助面板1=（）=>(
备选方案1的专家组
);
常量帮助面板2=（）=>(
备选方案2小组
);
常量帮助面板3=（）=>(
备选方案3小组
);
常量帮助面板4=（）=>(
备选方案4小组
);
ReactDOM.render(
,
document.getElementById（'root'））
);

我不太会反应，但我一直在做的是使用Redux。如果你想在内容中听到消息，你可以更新它的状态，然后再重新绘制它的内容。从按钮上，你需要做的就是发送一条消息来设置你想要的状态。例如Action.setView（'option1'））@Keith我希望有一种方法可以避免重复，但越来越多的情况是我无法逃避。谢谢你的建议！谢谢！这正是我所需要的！不幸的是，当我将它合并到我的应用程序中时，该死的箭头功能不起作用。哦，我想这是另一个线程的问题。实际上s是一个非常简单和幼稚的解决方案。它足以让你了解如何实现你的目标。我的意思是，如果构建真正的应用程序，不要完全依赖这个解决方案，因为你需要根据你的项目需要添加一些调整和增强。哦，是的，这是我需要的一个临时的东西，所以它工作得很好，最终我将成为c完全挂起来：）