Question

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

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

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

是否有可能拥有一个具有一个组件范围及其后代的变量？或者是否存在另一种针对这一挑战的“标准化”解决方案？

建议真的很感激！

Answer 1

您可以使用基于JSX spread attributes的ES7 spread operator proposal {...this.props}来传递道具。

这会破坏您在父母中收到的所有道具并将其传递给孩子。偶尔，您不想传递所有道具，然后您需要梳理（或添加）您要明确传递的道具。为此，使用ES6中提供的新destructuring syntax可能很有用。

示例：

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

使用this.context还有一种未记录的hacky技术，但该API不稳定且可能会发生变化。扩散运营商目前是React团队推荐的技术。

Answer 2

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

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