collections - 通过 React 和 Flux 使用存储中的数据集合

Question

我有一个使用多个数据标签页的 React + Flux 应用程序。每个标签页显示相同类型的数据（例如发票），但来自另一个对象。根据我阅读的有关此主题的其他帖子，我决定在“InvoiceStore”中创建一个集合，其中包含显示发票的每个标签页的“发票”对象。

在每个选项卡上（在发票的详细信息中），都有多个类似小部件的组件。这些组件嵌套在多个层中。

挑战在于每个组件都应该知道必须为哪个发票对象显示数据。我知道我可以通过将数据（实际数据或发票集合中项目的“键”）从发票（选项卡）的顶部组件传递给它的每个后代来安排，但这意味着组件在中间需要将收到的属性传递给它的孩子。这对我来说似乎有点矫枉过正。

是否有可能拥有某种范围为一个组件及其后代的变量？还是有另一种“标准化”解决方案来应对这一挑战？

非常感谢您的建议！

score 2 · Accepted Answer

您可以通过带有JSX 传播属性的道具：{...this.props}，它基于ES7 传播运算符提案。

这会解构您在父级中收到的所有道具并将它们传递给子级。有时候，你不想传递所有的 props，然后你需要明确地梳理（或添加）你想要传递的 props。为此，使用ES6 中可用的新解构语法可能很有用。

例子：

<MyChildComponent
  foo={bar}
  baz={qux}
  {...this.props}
/>

还有一种使用 this.context 的未记录的 hacky 技术，但该 API 不稳定并且可能会更改。扩展运算符目前是 React 团队推荐的技术。

score 1 · Accepted Answer

React 中没有“范围”概念，因为 React 方式更喜欢组合设计模式。子组件必须尽可能自完成，除了所需的道具之外，它不应该知道任何关于父组件的信息。因此，每个子组件都需要该对象。

另一种方法是在 InvoiceStore 中提供一个公共方法 getItem(itemId)。但是仍然必须通过道具传递 invoiceId。

2 回答 2