Реагировать Двунаправленный коммуникационный компонент

Question

Я делаю приложение в среагировать и идея заключается в том, чтобы иметь компонент позволяет назвать его компонент А, возврат функция имеет:

   <div> 
          <div> 
           <ExtraComponent 1/> 
           <ExtraComponent 2/> 
          </div> 
          <div> 
            <B /> 
          </div> 
       </div> 

Компонент B имеет один субкомпонент называется C, что он переключается при щелкнул (компонент C будет оказывать только если showProperty верно)

B = React.createClass({ 
     getInitialState: function() { 
     return { 
      showProperty: false 
     } 
     }, 

     handlerClick(e) { 
     this.setState({ 
      showProperty: !this.state.showProperty 
     }); 
     }, 

     render() { 
      return (
       <div onClick= { this.handlerClick }> 
        <span>B</span> 
      <C showProperty={this.state.showProperty} /> 
       </div> 
      ); 
     } 
    }); 

То, что я хочу сделать, это когда компонент B переключает его подкомпонент (C) Я хочу ему общаться с компонентом А (его отец), что это произошло поэтому он может переключать оба компонента ExtraComponents.

TLDR: Мне нужен способ для компонента реагировать на общение со своим ребенком и отцом в одно и то же время.

Заранее спасибо.

Приветствия, Джон.

Answer 1

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

var A = React.createClass({ 
    getInitialState() { 
    toggleState: 'false' 
    }, 

    render() { 
    return (
     <div> 
     <div> 
       <ExtraComponent1 toggleState={this.state.toggleState}/> 
       <ExtraComponent2 toggleState={this.state.toggleState}/> 
      </div> 
      <div> 
       <B onToggle={this.onToggle.bind(this)}/> 
      </div> 
     </div> 
    ); 
    }, 

    onToggle(toggleState) { 
    this.setState({ toggleState: toggleState }); 
    } 
}); 

var B = React.createClass({ 
     getInitialState: function() { 
     return { 
      showProperty: false 
     } 
     }, 

     handlerClick(e) { 
     this.setState({ 
      showProperty: !this.state.showProperty 
     }); 

     this.props.onToggle(this.state.showProperty); 

     }, 

     render() { 
      return (
       <div onClick= { this.handlerClick }> 
        <span>B</span> 
      <C showProperty={this.state.showProperty} /> 
       </div> 
      ); 
     } 
    });