Question

我想将我的组件存储到一个数组中，以进一步访问addChild之类的方法。我找不到合适的生命周期方法来存储组件。现在我正在滥用getInitialState功能。

components = {};

function Component(){
  return React.createClass({
    getInitialState : function({
      components[this.props.id] = {addChild: this.addChild}; 
      return child : [];
    }),
    addChild(child){
      this.state.children.push(child);
      this.setState({
        children : this.state.children
      });

    ...
  });
}

此函数仅在呈现组件时触发。是否存在使用createElement()？

创建组件后执行的生命周期功能

或者是否有更好的方法来存储组件以进一步访问方法？

Answer 1

通过提供对此元素的ref property的回调，您可以在呈现元素后获取该元素的实例。

以下是如何使用它（我假设你有一个JSX 和ES6 转换器）：

var instances = {};
const storeInstance = (i) => instances[i.props.id] = i;

var foo1 = (<Hello id="foo1" ref={storeInstance}/>);
var foo2 = (<Hello id="foo2" ref={storeInstance}/>);
var foo3 = (<Hello id="foo3" ref={storeInstance}/>);

Here is a live version

但是，我建议谨慎使用这种方法，因为它可以很快成为一种反模式。使用自下而上的重新渲染React机制通常更容易，更优雅。您只需从其父级更新元素的属性，然后让React完成剩下的工作。

在createElement（）上反应生命周期方法

1 个答案: