使用React和Flux存储中的数据集合

Question

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

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

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

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

非常感谢您的建议！

Answer 1

您可以通过具有JSX排列属性的道具：{...this.props}，这些属性基于ES7排列运算符建议。

这将销毁您在父对象中收到的所有道具，并将它们传递给子对象。偶尔，你不想传递所有的道具，然后你需要明确地梳理（或添加）你想要传递的道具。为此，使用ES6中提供的新的析构函数语法可能会很有用。

示例：

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

还有一种使用this.context的未记录的技巧，但API是不稳定的，很可能会改变。扩散算子目前是React团队推荐的技术。

Answer 2

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

另一种选择是在InvoiceStore中提供一个公共方法getItem（itemId）。但是仍然需要通过道具传递invoiceId。