【问题标题】：Passing props down to child inside parent's constructor在父母的构造函数中将道具传递给孩子
【发布时间】：2021-05-28 16:51:03
【问题描述】：

我试图将父母的状态传递给孙子的道具。问题是，我正在孩子的构造函数/状态变量中创建孙子组件，它似乎不想传递道具。子成功接收到道具results对象，但是孙子在我引用this.props.results时有一个空对象。 如何将道具下传给孙子？

父组件

render()
{

    return( <ChildComponent results={this.state.results}/> );

}

子组件

constructor(props) {
    super(props);

    this.state = {

      containerContent: [
        <GrandChildComponent results={props.results}/>, //this.props.results also does not work
      ]

    }
  }

render()
{

<main>

   {this.state.containerContent[0]}

</main>

}

孙子组件

render()
{

    <h3>{this.props.results.someValue}</h3> //Throws an error, saying `results` is empty.

}

【问题讨论】：

考虑构造函数只会运行一次的事实。您还可以显示子组件的渲染功能
当然——我为孩子添加了我的渲染方法（简化版）。基本上，我有一个包含 6 个不同“视图”的数组，我根据孩子的状态进行渲染。在这种情况下，我将其硬编码为视图 0，因为 containerContent 数组中只有一个元素。
你的来自父母的道具是否会随着时间而改变？结果对象是否在某个时候为空，然后在稍后被填充？
是的——你是对的......他们是。所以我猜构造函数只被调用一次，正如你提到的，而不是每次渲染一次？我将不得不想一个不同的解决方案来展示我的观点。
你不能把它们放在render里面吗？一旦道具改变就会被调用

标签： javascript reactjs

【解决方案1】：

你可以使用 context api 或者使用 redux。哪个更方便。

【讨论】：