Reactjs 如何呈现组件以响应侧栏主内容视图

[仪表板][1]

import React, { Component } from 'react'
import { NavLink } from 'react-router-dom';
import Sidebar from "react-sidebar";
import Main from '../util/dashboard/Main';
import Users from './Users';
import Pages from './Pages';

const sideBarMenu = (
<div>
    <div>
        <NavLink to='/show' >
            <img src="assets/img/logo.png" alt="" width="140" />
        </NavLink><br />
        <p>ID 113350 </p>

        <div>
            <div>
                <p className="color-green o-sidebar-header">TRANSACTION</p><br />
                <ul className="o-nav-ul">
                    <NavLink to="/main"><li  className="color-white">Main</li><br /></NavLink>
                    <NavLink to="/users"><li className="color-white">Users</li></NavLink>
                    <NavLink to="Pages"><li className="color-white">Users</li></NavLink>
                </ul>
            </div><br />             
        </div>
    </div>
</div>

import React，{Component}来自“React”
从'react router dom'导入{NavLink}；
从“反应侧栏”导入侧栏；
从“../util/dashboard/Main”导入Main；
从“./Users”导入用户；
从“./Pages”导入页面；
常量侧边栏菜单=(


身份证号码113350

交易



Main


用户
用户

)

类仪表板扩展组件{
状态={
sidebarDocked:mql.matches，
边栏栏：错
}
render（）{
返回(
)
}

}

我正在使用react边栏包。我一直在试图找到如何在点击侧边栏菜单列表上的菜单时将不同的组件显示到内容中（侧边栏菜单的右侧）

当前，从代码示例中显示“菜单”组件。如何显示任何其他组件来代替“主”组件

---

]：

你需要这样的东西吗

render（）{
返回(
)
}

---

当然，这并不意味着

在内容占位符中呈现某个内容。侧边栏内容和主内容呈现为同级-它们由父级连接<代码>反应边栏隐藏了这种复杂性。

这取决于。。。通常是公共父级、redux存储、状态。。。需要更多的细节，显示一些组件的代码结构，路由。。。并描述您的期望感谢您的回复。我对问题进行了一些编辑，以包括您突出显示的一些内容。为什么不使用

和不同的路线？当您需要在版面中呈现内容时，是否需要将整个版面插入内容组件？当某事物似乎必须重复时，是时候将其分解/分解为单独的组件了。当内容和边栏都是子项/同级项时，您需要使用父项来传递数据/值，否则它将破坏自上而下的数据传递规则。组件负责自己的内容—您可以告诉他要呈现什么，但不能呈现元素的内容—他的下一个呈现调用将删除“外部”更改。您必须以react/component的方式思考，而不是通过html/nodes/jquery…mess。@sn42我刚刚看到了这个示例，它解决了问题。不知道为什么我一开始没想到。非常感谢

class Dashboard extends Component {
state = {
sidebarDocked: mql.matches,
sidebarOpen: false
}

render() {
return (
    <div>

        <Sidebar
            sidebar={sideBarMenu}
            open={this.state.sidebarOpen}
            docked={this.state.sidebarDocked}
            onSetOpen={this.onSetSidebarOpen}
            styles={{sidebar: { background:"#290c49"} content:{background:"#f5f5f5",marginTop:"5px"}}}> 

            <Main  />

        </Sidebar>
    </div>
        )
    }