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

Question

比方说，我有一个很大的组件，需要state中的10个不同的值。

我可以把它分割成更小的组件，以提高可读性，虽然我不除重用任何其他地方的部分组成 - 他们仍然是太具体，因为他们需要知道太多关于国家是有用的。

因此，我将至少6个不同的道具传递给每个子组件。所以，当我通过缩小组件来提高可读性时，同时，通过为每个子组件传递太多道具来使可读性更差。

所以我想着如何解决这个问题的不同方法。

1.

组状态为一个值来移动它周围容易

例如而不是

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

其存储为

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

然后传递给孩子的组件作为一个道具。

2.

由于我的子组件是无状态的，只是通过状态<Child {...this.state} />。

使用终极版，并通过store，不过，我可能是错的，但我认为，依靠store.getState会变成我的简单的子组件到容器（在终极版而言）。

道歉，如果这个问题太泛化。

Answer 1

如果您想坚持使用组件的状态与Redux，选项2可以使用。

就我个人而言，我会使用Redux和映射状态到最父组件上的道具，使得这个唯一的容器。然后你可以将prop值降低到子组件：

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