通过 React 和 Flux 在商店中使用数据集合

Question

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

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

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

是否可能有某种变量具有一个组件及其后代的范围？或者是否有另一种 'standardized' 解决此挑战的方法？

非常感谢您的建议！

Answer 1

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

另一种方法是在 InvoiceStore 中提供 public 方法 getItem(itemId)。但是仍然必须通过 props 传递 invoiceId。

Answer 2

你可以通过 JSX spread attributes: {...this.props}, which are based on the ES7 spread operator proposal 的道具。

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

示例：

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

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

Using collections of data in a store with React and Flux