는 다른 구성 요소에서 업데이트 구성 요소 상태 반응

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

당신은 다른 구성 요소에서 하나 개의 구성 요소의 상태를 변경할 수 없습니다. 부모가 할 수있는 최선의 방법은 부모 구성 요소의 하위 요소가되고 둘 다 매개 변수를 prop으로 전달하는 것입니다. 그런 다음 componentWillReceiveProps(nextProps)을 사용하여 들어오는 새 소품을 가로 챌 수 있습니다 (이에 따라 상태를 수정하려는 경우).