react - 暴露组件功能

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

创建一个单独的存储类。将该类的实例嵌入每个有权编辑其包含的数据的地方。您可以在 Facebook 的架构库 Flux 中看到这一点。不要向下传递处理程序，而是从 Storage 类发出事件，并让每个组件订阅该存储类的实例。

很难描述，但该链接有一个视频可以很清楚地说明。这样，每当数据更改时，store 都会触发事件，这些事件将触发您的 react 视图的重新渲染。

Answer 2

你需要把它作为道具传递下去

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