Question

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

我开始尝试这个

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

但是，一旦安装了所有组件，这都不起作用，因为您无法将渲染组件调用到另一个组件内的元素中。

那么是否有一种可以将任何反应组件传递到另一个组件的方法？

Answer 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

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

将反应组分动态插入另一反应组分中

1 个答案: