は、別のコンポーネントからアップデートコンポーネントの状態に反応

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

私は「get_campus_id」から得られた「クラス名」に基づいて、このコンポーネントにCSSクラスを割り当てる：

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のURLは：https://github.com/WebTerminator/Hult

Answer 1

あなたは別のコンポーネントから1つのコンポーネントの状態を変更することはできません。あなたができることは、両方が親コンポーネントの子であることです。次に、パラメータをpropとして渡します。 componentWillReceiveProps(nextProps)を使用して、新しい小道具を傍受することができます（それに基づいて状態を変更したい場合）。