Javascript 与全局组件交互

我正在react中制作一个应用程序，并希望在单击应用程序中的各种链接时生成一个侧边栏。所以我首先制作了一个包装器组件，然后把边栏和页面放在下面

SetupRailsPage = React.createClass

  render: ->
    div id: 'setup-rails-page',

      Sidebar()

      div className: 'container',
        div className: 'row',
          div className: 'col-xs-8 col-xs-offset-2',
            RailsBox(rails: @props.rails)

但这感觉效率很低，理想情况下我不想把它添加到每一个页面上。我还没有看到任何与此相关的react代码，我想知道处理这种事情的“react方式”是什么。

我想这可能会有所帮助

如果您可以将应用程序分解为：

• 一个“公共部分”（包含侧边栏，可能还有其他内容），以及
• 每个“逻辑”页面的不同组件

这就是我们要解决的问题

---

编辑：OP确实希望有一个“全局”事件通知系统，以避免传递许多回调，如前所述。

您应该检查通量模式（）。应用程序状态由数据存储处理，您可以通过创建操作来更改此状态。对存储的任何更改都会导致它发出“更改”事件，从而导致感兴趣的组件重新渲染。您的侧边栏将生成操作，导致商店发生更改，进而导致应用程序的相关部分更新。Fluxxor（）是一个非常有用的插件，可以帮助实现这种模式。

我使用了react-router和react-router组件，但即使使用了它们，我如何与公共侧栏交互？我仍然需要将大量回调传递到被单击的项目以触发侧栏的打开，对吗？如果没有看到侧栏和“被单击的项目”交互的代码，很难说。现在，也许您的“内部”组件可以调用一个简单的“onClicked”回调，并且作为这些内部组件和侧边栏的父级的组件将处理交互。但是，是的，一般来说，如果您想与“父”组件通信，您必须使用回调（或通道，或通信的东西…），或者使用“全局”事件总线（如果这是最简单的）（）是的，对于“全局”事件系统，我的意思是在窗口中添加“事件总线”，并且，正如文章最后解释的那样，改为订阅这个。如果您真的需要全局，只需使用全局，没有人会注意；）注意：我当然知道你的意思。。您是否可以检查道具/状态以了解必须显示的组件？我能想到的最“动态”的事情是将组件的构造函数作为道具传递，并在render中调用此函数。。。（这就是我理解react router所做的）不，我的意思是将函数作为道具传递。React.createClass返回创建组件的函数；在JS中，您可以传递函数并动态调用它们。看这个：（如果你问另一个更集中的问题，我会很高兴地进一步阐述；）