react - expose組件函數

Question

如何在React中訪問不在直接父 - 子關係中的其他組件中的一個組件的方法？例如：

var QuestionsBox = React.createClass({ 
     **editQuestion**: function(questionId){    
      // do something 
      // this.refs.mainForm.loadQuestionFromServer.bind(this, questionId); 
     }, 
     getInitialState: function() { 
      return {data: []}; 
     }, 
     render: function() { 
      return (
       <div className="questionsBox"> 
       <h4>Questions</h4> 
       <QuestionsList data={this.state.data}/> 
       </div> 
      ); 
      }  
    }); 

    var QuestionsList = React.createClass({ 
     render: function() { 

      var reactObject = this; 

      var questionsList = this.props.data.map(function (question) { 
      return (
       <Question id={question.id}> 
       {question.question_name} 
       </Question> 
      ); 
      }); 

     return (
      <div> 
      {questionsList} 
      </div> 
     ); 
     } 
    }); 

var Question = React.createClass({ 
    render: function() { 
     return(
      <div className="question"> 
       {this.props.children} 
       <a onClick={**access here editQuestion method of QuestionsBox component, with parameters**}>edit</a> 
      </div> 
     ); 
    } 
}); 

或其他類似的結構，即沒有直接父子關係 ..

Answer 1

你需要傳遞下來的道具

var QuestionsBox = React.createClass({ 
     **editQuestion**: function(questionId){    
      // do something 
      // this.refs.mainForm.loadQuestionFromServer.bind(this, questionId); 
     }, 
     getInitialState: function() { 
      return {data: []}; 
     }, 
     render: function() { 
      return (
       <div className="questionsBox"> 
       <h4>Questions</h4> 
       <QuestionsList 
        data={this.state.data} 
        editQuestion={this.editQuestion} 
       /> 
       </div> 
      ); 
      }  
    }); 

    var QuestionsList = React.createClass({ 
     render: function() { 

      var reactObject = this; 

      var questionsList = this.props.data.map(function (question) { 
      return (
       <Question> 
       id={question.id} 
       editQuestion={this.props.editQuestion} 
       {question.question_name} 
       </Question> 
      ); 
      }); 

     return (
      <div> 
      {questionsList} 
      </div> 
     ); 
     } 
    }); 

var Question = React.createClass({ 
    render: function() { 
     return(
      <div className="question"> 
       {this.props.children} 
       <a id={this.props.id} onClick={this.editQuestion}>edit</a> 
      </div> 
     ); 
    }, 
    editQuestion: function(e) { 
     this.props.editQuestion(e.target.id); 
    } 
}); 

Answer 2

創建一個單獨的存儲類。將該類的實例嵌入每個有權編輯其所包含數據的位置。您在Flux，Facebook的架構庫中看到此內容。不要傳遞處理程序，而要從Storage類發出事件，並讓每個組件都訂閱該存儲類的實例。

這很難描述，但該鏈接有一個視頻，這將很清楚。這樣，任何時候數據發生變化時，商店都會觸發事件，這會觸發重新呈現您的反應視圖。