Question

如何在React（一种其他组件中的一个组件的方法）中访问，这些方法不是直接的父子关系？例如：

& cmd /c ""$hubSyncronizerExePath"" /database $database

或其他类似结构，没有直接的亲子关系 ..

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

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

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

反应 - 暴露组件功能

2 个答案: