将反应组件动态插入另一个反应组件答案

【问题标题】：Dynamically insert react components into another react component将反应组件动态插入另一个反应组件
【发布时间】：2014-10-13 16:35:34
【问题描述】：

现在我有一个侧边栏，我想将其用于各种形式和信息。我正在使用全局事件系统来触发侧边栏的打开，但是我不确定如何将react组件注入到侧边栏react组件中。

我开始尝试这个

componentWillMount: ->
  window.toggleSidebar = (react_component)=>
    React.renderComponent(react_component(), document.getElementById('sidebar-content'))
    @toggleSidebar()

但是一旦所有组件都被挂载，这将不起作用，因为您不能将渲染组件调用到另一个组件内的元素中。

那么有没有一种可接受的方式将任何反应组件传递给另一个组件？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

您实际上并不想传递组件实例，您想传递组件工厂和可用于渲染组件的数据。

events.emit('sidebar-change-request', {component: Foo, props: obj, open: true});

在侧边栏组件中它会监听事件：

  getInitialState: -> component: React.DOM.div, props: {}, open: false

  # standard event emitter stuff    
  componentDidMount: -> 
    events.addListener 'sidebar-change-request', this.handleSidebarChangeRequest

  componentWillUnmount: ->
    events.removeListener 'sidebar-change-request', this.handleSidebarChangeRequest

  # simply apply the payload to state
  handleSidebarChangeRequest: (payload) ->
    this.setState payload

  # dynamically render stuff
  render: ->
    if this.state.open
       React.DOM.div {className: "sidebar"},
          this.state.component this.state.props
    else
       React.DOM.div null

如果您需要从侧边栏中的组件中获取一些信息，您可以通过 props 将回调传递给该组件；或者组件可以发出事件。

【讨论】：

非常感谢，这解决了很多问题。我要去测试一下。但有一件事，您使用的事件系统是什么？我对全球事件和所有这些都有些陌生。我目前正在使用名称间隔的全局事件系统，并且我看到其他人使用骨干事件系统。那是一个不同的事件系统吗？
我通常使用node's EventEmitter。如果您使用的是 browserify 或类似工具，您可以通过 var EventEmitter = require('events').EventEmitter, events = new EventEmitter() 获取它。还有EventEmitter2，您可以在npm 或standalone 中轻松获取。