嵌套状态反应，以减少通过的道具数量

Question

假设我有一个大型组件，在state中需要10个不同的值。

我可以将它拆分成更小的组件以提高可读性，尽管我不会在其他任何地方重用任何这些组件 - 它们仍然太具体，因为它们需要过多了解状态才有用。

因此，我向每个儿童组件传递至少6种不同的道具。因此，虽然我通过使组件变小来提高可读性，但同时，通过在每个子组件中传递过多的道具，使可读性变差。

所以我在考虑如何解决这个问题的不同方法。

1

将状态分组为单个值以便更轻松地移动它

E.g。而不是

{
  a: 1,
  b: 2,
  c: 3
}

将其存储为

{
  abc: {
    a: 1,
    b: 2,
    c: 3
  }
}

然后将子组件传递给单个prop。

2

由于我的子组件是无状态的，只需将状态传递为<Child {...this.state} />。

1. 使用redux并传递store，但是，我可能错了，但我认为，依靠store.getState会将我的简单子组件转换为容器（以redux术语表示）。

如果这个问题过于笼统，请道歉。

Answer 1

如果您想坚持使用组件的状态与Redux。

，则选项2有效

就个人而言，我会使用Redux并将状态映射到最多父组件上的props，使其成为唯一的容器。然后你可以将prop值解构为子组件：

<Child {...this.props.exampleProp} />