将react组件动态插入到另一个react组件中

Dynamically insert react components into another react component

本文关键字：react 组件 另一个 动态 插入      更新时间：2023-09-26

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

我开始尝试这个

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

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

那么，有没有一种公认的方法可以将任何反应成分转化为另一种成分？

您实际上并不想传递组件实例，而是希望传递组件工厂和它可以用来渲染组件的数据。

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向该组件传递回调；或者该组件可以发出事件。

相关文章：