Reactjs 将多个状态片段合并到组件道具中

我有一个关于如何处理多个组件之间的状态的问题。假设我有以下组件结构：

class ExampleComponent extends React.Component<...> {
    public render() {
        return <div>
            <h1>Hello world</h1>
            <SomeComponent {...this.props} />
            <SomeOtherComponent = {...this.props} />
        </div>
    }
}

我当然简化了上面的例子来说明我的要求

在这里，基础组件SomeComponent和SomeOtherComponent使用父状态进行更新。我不知道这是否是正确的方法，我理想的做法是每个组件都有自己的状态，并且顶层组件可以访问所有底层组件的状态。像这样的高层

export default connect(
    (state: ApplicationState) => Object.assign(state.ExampleComponent, state.SomeComponent, state.SomeOtherComponent), 
    ExampleComponentStore.actionCreators                 
)(ExampleComponent) as typeof ExampleComponent;

---

但是，当状态正在更新时，这不起作用。这里的正确方法是让顶级组件拥有其他组件的所有状态，并将它们作为道具传递吗？或者所有子组件都应该有自己的状态，根据需要在顶级组件处合并？我感谢你的任何意见

这将是其中一个“一般来说的答案”，因为对于哪些组件应该是

connect

ed，哪些应该作为道具传递，没有硬性的规则，但下面是我的想法

<SomeComponent {...this.props} />
<SomeOtherComponent = {...this.props} />

此

MapStateTops

已损坏。

Object.assign

的第一个参数是变异的参数。这更准确地写为

(state: ApplicationState) => Object.assign({}, state.ExampleComponent, state.SomeComponent, state.SomeOtherComponent)

或使用

请记住，这将使状态平坦化，因此如果状态树的每个分支之间存在任何重复的关键点，其中一些关键点将丢失。如果这是您想要做的，那么您最好传递整个状态树

---

理想情况下，我希望每个组件都有自己的状态，顶层组件可以访问所有底层组件的状态

我很好奇为什么顶级组件需要访问底层组件的状态

---

请不要误解我的意思，在redux中，组件之间使用相同的状态通常是正常的（在某些情况下受到鼓励），但在这种情况下，我不明白为什么它本身需要它，除了将它传递到底层组件上（如果您采用这种方法）。

作为旁注，您的第二个

mapState

定义已被破坏-它将变异

状态。例如，组件

。相反，您应该返回一个新对象，其中包含您想要作为组件道具的数据片段。另外，为了可读性，我个人建议单独编写

mapState

函数，而不是尝试在

connect

调用中内联编写它。感谢您提供了一个非常好的答案。顶级组件在某些情况下可能需要状态来确定它应该/不应该显示什么，我只是想知道可以使用什么不同的方法来实现这一点。正如我所说的，通常情况下会将相同的状态包含到多个组件中，因此它可能对您有效（听起来像是这样）。如果组件不想呈现任何内容，则返回

null

也是有效的，因此通常可以将条件逻辑下推到具有状态的组件。请记住，这里没有硬性规定，找到最适合你的模式并按照它运行。

(state: ApplicationState) => Object.assign(state.ExampleComponent, state.SomeComponent, state.SomeOtherComponent)

(state: ApplicationState) => Object.assign({}, state.ExampleComponent, state.SomeComponent, state.SomeOtherComponent)

(state: ApplicationState) => ({ ...state.ExampleComponent, ...state.SomeComponent, ...state.SomeOtherComponent })