Общайтесь между двумя компонентами reactjs

Question

Я делаю веб-приложение, которое я намерен сделать как можно более модульным, используя reactjs.

Приложение состоит из menu и связанных с покупками cart, который держит след, какие элементы помещаются в cart из menu.

Мой кода:

React.render(
       <div className="row"> 
       <div className="col-md-7"> 
        <MainMenu /> 
       </div> 
       <div className="col-md-4"> 
       <CartView /> 
       </div> 
       </div> 
    , mountpoint 
    ); 

Как видно, нет иерархической связи между моими двумя этими компонентами, так ясно, что я не могу общаться, передавая props.

Я прочитал на официальном Реагировать документации:

Для связи между двумя компонентами, которые не имеют отношения родитель-потомок с , вы можете создать свою собственную систему глобального события . Подпишитесь на события в компонентеDidMount(), отмените подписку на componentWillUnmount() и вызовите setState(), когда вы получаете событие. Флюсовый шаблон является одним из возможных способов, как это устроить

Однако в настоящее время я не хочу использовать Flux в своем приложении.

Итак, мой вопрос:

Есть ли способ создания системы передачи сообщений между компонентами без использования Flux?

P.S: Я знаю jQuery. У меня возникли проблемы с пониманием примера ToDo, приведенного на веб-сайте Flux, поэтому было просто интересно, есть ли альтернативный способ сделать это.

Спасибо.

Answer 1

Да, вы можете сделать это без Flux. Но рассмотрим Flux, потому что это потрясающе.

Но если вы не хотите его использовать, почему бы не сделать их иерархическими отношениями?

Как вы это сделаете, создайте новый компонент уровня корня, который вы монтируете, а затем компоненты <MainMenu /> и <CartView /> в качестве детей. Предоставляйте обратные вызовы для событий на этих дочерних компонентах, которые родитель может затем привязать, чтобы изменить его состояние, которое влияет на переданные реквизиты.

Пример этого, используя свой код в качестве основы:

var Root = React.createClass({ 

    getInitialState: function() { 
     return { 
      itemId: 1 
     } 
    }, 

    mainMenuChangeHandler: function(itemId) { 
     if (itemId !== this.state.itemId) { 
      this.setState({ 
       itemId: Number(itemId) 
      }) 
     } 
    }, 

    render: function() { 
     return (
      <div className="row"> 
       <div className="col-md-7"> 
        <MainMenu onChange={this.mainMenuChangeHandler} /> 
       </div> 
       <div className="col-md-4"> 
        <CartView itemId={this.state.itemId} /> 
       </div> 
      </div> 
     ) 
    } 
}); 

var MainMenu = React.createClass({ 
    propTypes: { 
     onChange: React.PropTypes.func.isRequired 
    }, 
    clickHandler: function(e) { 
     e.preventDefault(); 
     this.props.onChange(e.target.href); 
    }, 
    render: function() { 
     return (
      <div> 
       <a href="1" onClick={this.clickHandler}>Item 1</a> 
       <a href="2" onClick={this.clickHandler}>Item 2</a> 
      </div> 
     ); 
    } 
}); 

var CartView = React.createClass({ 
    propTypes: { 
     itemId: React.PropTypes.number.isRequired 
    }, 
    render: function() { 

     var item; 
     if (this.props.itemId === 1) { 
      item = (
       <div>This is Item 1 being shown</div> 
      ); 
     } else if (this.props.itemId === 2) { 
      item = (
       <div>This is Item 2 being shown</div> 
      ); 
     } 

     return (
      <div>{item}</div> 
     ); 
    } 
}); 

React.render(<Root />, mountpoint);