Динамически вставляйте реагирующие компоненты в другой реагирующий компонент

Прямо сейчас у меня есть боковая панель, которую я хочу использовать для различных форм и бит информации. Я использую глобальную систему событий, чтобы инициировать открытие боковой панели, но я не уверен, как вставлять реактивные компоненты в компонент реакции боковой панели.Динамически вставляйте реагирующие компоненты в другой реагирующий компонент

Я начал пробовать этот

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

Но это не сработало, когда все компоненты установлены, потому что вы не можете вызвать визуализации компонент в элемент, который находится внутри другого компонента.

Так есть ли принятый способ передать любой компонент реакции в другой компонент?

источник

2014-10-13 Blaine Hatab

Фактически вы не хотите передавать экземпляр компонента, вы хотите передать фабрику компонентов и данные, которые он может использовать для визуализации компонента.

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

Если вам нужно, чтобы получить некоторую информацию обратно из компонента renered в боковой панели, вы бы передать функцию обратного вызова к этим компонентам через опоры; или компонент может генерировать события.

источник

2014-10-13 19:41:28 FakeRainBrigand

Большое вам спасибо, это многое проясняет. Я собираюсь проверить это. Одна вещь, однако, что такое система событий, которую вы используете? Я несколько новичок в глобальных событиях и все такое. В настоящее время я использую глобальную систему событий с разнесением имен, и я видел, как другие используют систему событий с базовыми системами. Это другая система событий? –

Обычно я использую [EventEmitter узла] (http://nodejs.org/api/events.html). Вы можете получить его с помощью команды «var EventEmitter = require (« events »). EventEmitter, events = new EventEmitter()', если вы используете браузер или аналогичный. Также есть [EventEmitter2] (https://github.com/asyncly/EventEmitter2), который вы можете легко получить в npm или [автономно] (http://wzrd.in/standalone/eventemitter2). – FakeRainBrigand

Динамически вставляйте реагирующие компоненты в другой реагирующий компонент

ответ

Смежные вопросы