Question

我有一个带有子元素的父组件。我尝试在父组件安装后添加子元素：

class Parent extends React.Component {

  componentDidMount() {
    this.props.children.push(<NewChildComponent/>)
  }

  render() {
    return (
      <div>
        {this.props.children}
      </div>
    )
  }

}

有人可以告诉我 1.如何在父装入后添加子元素 2.为什么以上不起作用

Answer 1

它没有用，因为你手动改变props数组 - React不知道它已经改变了。一般来说，你根本不应该改变道具。

如果你真的想这样做，你可以在componentDidMount中使用setState，然后通过它来渲染你的子组件：

class Parent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      childComponent: null
    }
  }

  componentDidMount() {
    this.setState({ childComponent: <div>Hello</div> });
  }

  render() {
    return (
      <div>
        {this.state.childComponent}
      </div>
    )
  }
}

然而，无论你想做什么，都可能有更好的解决方案。我无法想象很多情况下你只想在父装载后才能渲染东西。

Answer 2

你能不能试试componentWillMount，我想这会解决问题

React：在父组件安装后添加子元素

2 个答案: