Question

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

我已经尝试了文档提到的关于refs callBack的问题这种方法的问题是，一旦所述组件安装完毕，React就不会传递参考回调属性部分中提到的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保留对动态子引用的引用

2 个答案: