Reactjs React生命周期方法赢得'；t调用React.Component时触发<；道具，状态>'；s render（）方法

我有一个父react组件，它动态生成一个自定义子元素数组。父级的生命周期方法被正确触发。它的子元素生命周期方法不会被调用。我的问题是：为什么

家长：

export default class Parent extends React.Component<IParentProps, IParentState> {
  public children: Array<IChild & React.Component> = new ArrayArray<IChild & React.Component>();

  constructor(props) {
    super(props);

    this.children.push(new Child({
      options: {}
    }));
    this.children.push(new Child({
      options: {}
    }));

    console.log('constructor(props)');
  }

  public componentWillMount() {
      // gets called
  }

  public render(): React.ReactElement<IParentProps> {
    return (
        <div>
            {this.children[this.state.currentStep].render()}
        </div>
    );
  }
}

导出默认类父类扩展React.Component{
公共子项：Array=new ArrayArray（）；
建造师（道具）{
超级（道具）；
这个.孩子.推（新孩子）({
选项：{}
}));
这个.孩子.推（新孩子）({
选项：{}
}));
console.log（'constructor（props）'）；
}
公共组件willmount（）{
//被叫
}
public render（）：React.ReactElement{
返回(
{this.children[this.state.currentStep].render（）}
);
}
}

儿童：

export default class Child extends React.Component<IChildProps, IChildState> implements IChild {
  //#region IStep implementation
  //#endregion

  constructor(props) {
    super(props);
  }

  public componentWillMount() {
      // won't get called, neither any other life cycle method, such as componentDidMount etc.
  }


  public render(): React.ReactElement<IChildProps> {
   // gets called
    return (
      <div>
        I am child
      </div>
    );
  }
}

导出默认类子类扩展React。组件实现IChild{
//#区域IStep实施
//#端区
建造师（道具）{
超级（道具）；
}
公共组件willmount（）{
//不会被调用，也不会调用任何其他生命周期方法，例如componentDidMount等。
}
public render（）：React.ReactElement{
//被叫
返回(
我是个孩子
);
}
}

---

有什么想法吗？

您不应该直接调用render

您需要改为使用Reacts安装和管理via

如何实现这一点的示例：

render(): React.ReactElement<IParentProps> {
    return (
        <div>
            {React.createElement(this.children[this.state.currentStep], props, children)}
        </div>
    );
  }

render（）：React.ReactElement{
返回(
{React.createElement（this.children[this.state.currentStep]，props，children）}
);
}

您不能直接调用render

您需要改为使用Reacts安装和管理via

如何实现这一点的示例：

render(): React.ReactElement<IParentProps> {
    return (
        <div>
            {React.createElement(this.children[this.state.currentStep], props, children)}
        </div>
    );
  }

render（）：React.ReactElement{
返回(
{React.createElement（this.children[this.state.currentStep]，props，children）}
);
}

您不能像这样调用子级的render方法（/！\bad practice）。 React无法知道此组件是否存在。 这里有一个修正：

export default class Parent extends React.Component<IParentProps, IParentState> {
  public children: Array<IChild & React.Component> = new ArrayArray<IChild & React.Component>();

  constructor(props) {
    super(props);

    this.children.push(new Child({
      options: {}
    }));
    this.children.push(new Child({
      options: {}
    }));

    console.log('constructor(props)');
  }

  public componentWillMount() {
      // gets called
  }

  public render(): React.ReactElement<IParentProps> {
    const Child = this.children[this.state.currentStep]
    return (
        <div>
            <Child />
        </div>
    );
  }
}

导出默认类父类扩展React.Component{
公共子项：Array=new ArrayArray（）；
建造师（道具）{
超级（道具）；
这个.孩子.推（新孩子）({
选项：{}
}));
这个.孩子.推（新孩子）({
选项：{}
}));
console.log（'constructor（props）'）；
}
公共组件willmount（）{
//被叫
}
public render（）：React.ReactElement{
const Child=this.children[this.state.currentStep]
返回(
);
}
}

您不能像这样调用子级的render方法（/！\bad practice）。 React无法知道此组件是否存在。 这里有一个修正：

export default class Parent extends React.Component<IParentProps, IParentState> {
  public children: Array<IChild & React.Component> = new ArrayArray<IChild & React.Component>();

  constructor(props) {
    super(props);

    this.children.push(new Child({
      options: {}
    }));
    this.children.push(new Child({
      options: {}
    }));

    console.log('constructor(props)');
  }

  public componentWillMount() {
      // gets called
  }

  public render(): React.ReactElement<IParentProps> {
    const Child = this.children[this.state.currentStep]
    return (
        <div>
            <Child />
        </div>
    );
  }
}

导出默认类父类扩展React.Component{
公共子项：Array=new ArrayArray（）；
建造师（道具）{
超级（道具）；
这个.孩子.推（新孩子）({
选项：{}
}));
这个.孩子.推（新孩子）({
选项：{}
}));
console.log（'constructor（props）'）；
}
公共组件willmount（）{
//被叫
}
public render（）：React.ReactElement{
const Child=this.children[this.state.currentStep]
返回(
);
}
}

我从不在react类中使用public关键字，但我不知道这是否会改变此处的任何内容。如果您不指定它，它是隐式公共的。因此：它不会改变任何东西。我从不在react类中使用public关键字，但我不知道这是否会改变此处的任何内容。如果您不指定它，它是隐式公共的。因此：它不会改变任何事情。啊，我有一种感觉，调用render（）将是一件“不好”的事情，但不知道更好（最好）的做法是什么。在一个纷繁复杂的世界里，作为一名后端开发人员，生活很艰难。谢谢！：）啊，我有一种感觉，调用render（）将是一件“不好”的事情，但不知道更好（最好）的做法是什么。在一个纷繁复杂的世界里，作为一名后端开发人员，生活很艰难。谢谢！：）非常感谢您，Pandelis回答中的评论也是针对您的！非常感谢您，Pandelis回答中的评论也是针对您的！