Question

我做了一个测试，我在子组件中执行React.render()并将支柱传递给它。应用程序结构如下所示：

<App>
  <Child />
</App>

然后在<Child />中，我使用另一个<Outside />渲染React.render()个组件。当我检查Chrome React firebug时，App结构是：

<App>
  <Child />
</App>
<Outside />

而不是：

<App>
  <Child />
    <Outside />
</App>

但是，当从{selected : true }传递<App />状态时，它在<Outside />中显示为支柱，但是当我在{{ selected : false }中进行状态更改时1}}，<App />和<Child />都没有收到更新的道具。我认为这是因为<Outside />超出<Outside />范围，因此数据流不能很好地流动。（抱歉我的英文）

您可以在此处查看测试：http://jsbin.com/yazaqo/1/edit?js,console,output

我想问的是：有没有其他方法可以更新在 App范围内的组件？

Answer 1

Child组件正在接收更新的道具，它只是没有记录到控制台。

当组件收到新道具时，只会调用render和componentWillReceiveProps，因此如果您将console.log移动到其中任何一种方法，您就会看到更新后的值。

这也是Outside未收到更新道具的原因。您在componentDidMount中渲染它，只在安装组件时调用一次。

它应该在Child render方法中呈现，与Child组件中呈现App的方式相同。另一种选择是在componentWillReceiveProps中呈现它，尽管你可能会遇到一些问题。

希望这有帮助。

Reactjs：改变主范围之外的道具

1 个答案: