javascript - 在 createElement() 上 react 生命周期方法

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 完成其余的工作。