Reagieren Aktualisierungskomponente Zustand von einer anderen Komponente

Question

Ich habe eine Komponente wie folgt:

var SingleEditableModule = React.createClass({ 
     getInitialState: function() { 
      return { 
       selected: false 
      }; 
     }, 
     show_overlay: function() { 
      $('.overlay').fadeIn(); 
     }, 
     render: function() { 
      var show_overlay = this.show_overlay; 
      return (
       <div className="large-4 small-12 columns"> 
        <h3 className="title">{this.props.data.title}</h3> 
        <div className="month"> 
         <p> 
          {this.props.data.month} 
         </p> 
        </div> 
        <div className="img-holder"> 
         <div 
          id={this.props.data.id} 
          onClick={show_overlay} 
          className="action_wrapper"> 
           <span className="swap_trigger"></span> 
           <span className="action"> 
            {this.props.data.action} 
           </span> 
         </div> 
        </div> 
        <h4>{this.props.data.title_description}</h4> 
        <p>{this.props.data.description}</p> 
       </div> 
      ); 
     } 
    }); 

Ich möchte eine CSS-Klasse auf diese Komponente auf „classname“ gewonnen aus „get_campus_id“ Basis zuzuweisen:

var Overlay = React.createClass({ 
     close_overlay: function() { 
      $('.overlay').fadeOut(); 
     }, 
     get_campus_id: function(className) { 
      console.log(className); 
     }, 
     render: function() { 
      var options = [], 
       get_campus_id = this.get_campus_id; 
      this.props.data.map(function(el, i){ 
       options.push(<li 
       className={el.className} 
       onClick={get_campus_id.bind(null, el.className)} 
       key={i}>{el.location}</li>); 
      }); 
      return (
       <div className="overlay"> 
        <div className="overlay-content"> 
         <header className="clearfix"> 
          <h3 className="float-left">Select your campus rotation</h3> 
          <div onClick={this.close_overlay} className="float-right close"> 
           <span className="cancel">Cancel</span> 
           <span className="x">x</span> 
          </div> 
         </header> 
         <ul> 
          {options} 
         </ul> 
         <footer> 
         </footer> 
        </div> 
       </div> 
      ) 
     } 
    }); 

"SingleEditableModule" stellt ein leeres Modul dar, das basierend auf dem von "get-campus_id" zurückgegebenen Wert gefüllt werden kann.

Voll Github url: https://github.com/WebTerminator/Hult

Answer 1

Sie können den Zustand einer Komponente von einer anderen Komponente ändern. Das Beste, was Sie tun können, ist, dass beide Kinder einer Elternkomponente sind, und dann Parameter als prop übergeben. Sie können dann componentWillReceiveProps(nextProps) verwenden, um neue Requisiten abzufangen (wenn Sie dann einen darauf basierenden Zustand ändern möchten).