從另一個組分反應更新組件的狀態

Question

我有一個組件如下：

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> 
      ); 
     } 
    }); 

我想一個CSS類分配給基於「類名」，從「get_campus_id」獲得這個組件：

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」表示可以根據從「get-campus_id」返回的值填充的空模塊。

完全github上網址：https://github.com/WebTerminator/Hult

Answer 1

您不能從另一個組件改變一個組件的狀態。你可以做的最好的就是將它們都作爲父組件的子組件，然後將參數作爲prop傳遞。然後你可以使用componentWillReceiveProps(nextProps)來攔截進入的新道具（如果你想然後修改一個基於此的狀態）。