javascript - Reactjs:在主范围之外更改 Prop

我在我做的地方做了一个测试 React.render()在子组件中并将 prop 传递给它。应用程序结构如下所示:

<App>
  <Child />
</App>

然后在 <Child /> ，我渲染<Outside />与另一个组件 React.render() 。当我检查 Chrome React firebug 时，应用程序结构是:

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

而不是:

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

但是，当传递{selected : true }时状态来自<App /> ，它在 <Outside /> 中显示得很好。，但是当我将状态更改为 { selected : false } 时在<App /> ，两者 <Child />和<Outside />没有收到更新的 Prop 。我认为发生这种情况是因为<Outside />出了<App />范围，因此数据流不能很好地流动。 (抱歉我的英语)

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

我想问的是:是否有其他方法可以更新应用程序范围之外的组件？

最佳答案

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

当组件接收到新的 props 时，只有 render 和 componentWillReceiveProps 被调用，因此如果您将 console.log 移动到其中任何一个方法，您将看到更新后的值。

这也是 Outside 没有收到更新后的 prop 的原因。您在 componentDidMount 中渲染它，该组件仅在安装组件时调用一次。

它应该在 Child 的 render 方法中呈现，与 Child 在 App 中呈现的方式相同成分。另一种选择是在 componentWillReceiveProps 中渲染它，尽管这样做可能会遇到一些问题。

希望这有帮助。

关于javascript - Reactjs:在主范围之外更改 Prop ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29877100/