我正在尝试创建一个具有 3 级的分层菜单选择组件。
结构是这样的:
CategoryLv0
-->CategoryLv1
---->CategoryLv2
点击CategoryLv0
后节点和 CategoryLv1
的初始渲染节点完成一切都很好。我遇到的问题是当我单击 CategoryLv1
时它应该从父组件沿着组件链发送更新的 prop 以触发 componentWillReceiveProps
在CategoryLv1
等级。这将 setState
并渲染CategoryLv2
从该节点分支。然而componentWillReceiveProps
Hook CategoryLv1
由于某种原因从未被调用过。第一级( CategoryLv0
)按预期工作并接收更新的 Prop ,使我能够 setState
在它的componentWillReceiveProps
触发重新渲染。似乎后续级别应该像 lv0 一样工作,但事实并非如此。
我提供了一份博览会小吃,以便您可以看到它的实际效果。
编辑 该零食已更新,以删除子组件中的冗余状态,componentWillReceiveProps 并将 extraData={this.props} 添加到 flatLists Expo Snack of ComponentSelectionComponent
<div data-snack-id="SkcBrXsMG" data-snack-platform="android" data-snack-preview="true" data-snack-theme="dark" style="overflow:hidden;background:#212733;border:1px solid rgba(0,0,0,.16);border-radius:4px;height:505px;width:100%"></div>
<script async src="https://snack.expo.io/embed.js"></script>
最佳答案
特拉维斯为我指明了正确的方向。
答案是我需要在子组件的 FlatList
中使用 extraData
属性。没有它,它就不知道重新渲染。
因此,由于我将菜单的主状态作为 Prop 传递给子组件,因此我设置了 extraData={this.props}
来访问该状态。而且它有效!
关于javascript - React Native 子组件未接收更新的 props,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47914834/