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

Question

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

我已经尝试过文档中提到的关于 refs 回调的内容。这种方法的问题是，一旦所述组件安装，React 不会在 Ref Callback Attribute 部分中通过 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

这是我将采取的方法。管理每个组件的完整性状态，以及 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'));

Answer 2

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