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类发出事件，并让每个组件都订阅该存储类的实例。

这很难描述，但该链接有一个视频，这将很清楚。这样，任何时候数据发生变化时，商店都会触发事件，这会触发重新呈现您的反应视图。