使用 Reactjs 保留对动态 child 引用的引用

Question

我如何使用 Reactjs 保留对动态 child 引用的引用。我有一个管理 children 的主组件。该组件需要访问其 child 的状态以确定每个 child 组件是否已完成它们负责的流程。除非所有 child 个组件都完成，否则主组件不完整。

我已经尝试了文档中提到的关于 refs 回调的内容。这种方法的问题是，一旦安装了所述组件，React 就不会像此处提到的那样在 Ref Callback 属性部分中传递组件引用 http://facebook.github.io/react/docs/more-about-refs.html。

请查看下面的示例脚本，其中详细说明了我的问题。

var App = React.createClass({

 registerComponent: function (comp){
    //logic to retain a reference to the component
    //The problem with this approach is that React does not pass the component reference as mentiond 
    //here  http://facebook.github.io/react/docs/more-about-refs.html in the he ref Callback Attribute //section. 
 },
 isComplete: function(){
    //check  all child components to see if the App is complete
    for (comp in this.refs){
        //if any component is not complete then the App as a whole is not complete
        if(!comp.state.complete){
            return false;
        } 
    }

   return true;
 },
  render: function() {
    return(
      <div className="Container">
        {this.state.arrayOfdata.map(function(value){

          if(value === class1Value){

            return <class1 ref={this.registerComponent}/>;
          }
          else if (value === class2Value){

            return <Class2 ref={this.registerComponent} />
          }
          else if (value === class3Value){
            return <Class3 ref={this.registerComponent}/>
          }                  
        }.bind(this))}
      </div>
    );      
  }

});

var class1 = React.createClass({
  getInitialState:function(){
    return {
      complete: false;
    }
  },
  render: function (){
    return(
      <span className="class1"/>
    )
  }
});

var class2 = React.createClass({
  getInitialState:function(){
    return {
      complete: false;
    }
  },
  render: function(){
    return(
      <span className="class2"/>

    );
  }
});

var class3 = React.createClass({
  getInitialState:function(){
    return {
      complete: false;
    }
  },
  render: function(){
    return(
      <span className="class3"/>
    );
  }
});

var AppHandle = React.render(<App/>,
  document.getElementById('content')
);

我可能做错了什么？他们是实现我尝试使用 this.refs 数组的更好方法吗？

Answer 1

似乎 refs={callback} 功能仅在 React v0.13 中可用，因为我正在使用 v0.12，因此，此功能不起作用。诚实的错误。

Answer 2

这是我会采用的方法。管理每个组件的完整性状态，以及是否所有组件都在 App 组件中完成并具有一个函数 handleComplete ，您可以通过 props 作为回调传递。具体实现将取决于您的数据，但这应该给您基本的想法：

var App = React.createClass({
  getInitialState: function(){
    return {complete: [], arrayOfdata: [], allComplete: false}
  },
  //call initializeComplete after arrayOfdata has been loaded
  initializeComplete: function(){
    var complete = [];
    for (i in this.state.arrayOfdata){
      complete[i] = false;
    }
    this.setState({complete: complete})
  },
  checkAllComplete: function(complete){
    for (i in complete){
      if (complete[i] == false){
        return false;
      }
    }
    return true;
  },
  handleComplete: function(index){
    complete = this.state.complete;
    complete[index] = true;
    allComplete = this.checkAllComplete(complete);
    this.setState({complete: complete, checkAllComplete: allComplete});
  }, 
  render: function() {
    //this assumes you can get whether the object is class 1, 2 or 3 from some attribute of the data
    components = this.state.arrayOfdata.map(function(object){
      return <ClassComponent classType={object.classType} index={count} key={object.uniqueAttribute} handleComplete={this.handleComplete}/>;               
    }.bind(this));
    return(
      <div className="Container">
        <span> Master component {this.state.allComplete ? 'complete' : 'incomplete'} </span>
        {components}
      </div>
    );      
  }

});

var ClassComponent = React.createClass({
  handleClick: function(){
    this.props.handleComplete(this.props.index);
  },
  render: function (){
    return(
      <span className={this.props.classType} onClick={this.handleClick}/>
    )
  }
});

React.render(<App/>,document.getElementById('content'));

使用 Reactjs 保留对动态 child 引用的引用

Retain reference to dynamic child refs with Reactjs

javascript

facebook

reactjs