是否可以在 React 中访问子组件的状态？答案

【问题标题】：Is it possible to access the state of a child component in React?是否可以在 React 中访问子组件的状态？
【发布时间】：2018-03-03 19:05:47
【问题描述】：

我正在一个项目中工作，将大型 Silverlight 应用程序替换为使用 react（和 redux）的 Web 应用程序。用户可以在多个选项卡和子选项卡之间跳转。

我们正在使用 redux 来保存选项卡/子选项卡状态。当前的解决方案使用 cloneElement 来注入之前的状态和一个所有组件都需要调用的函数（onSaveState）来保存状态。

有没有办法避免在选项卡+子选项卡的所有页面中保存/加载样板代码，例如通过获取子组件的状态？

一个丑陋的解决方案是保存整个组件（包括状态），但这会带来很多开销 + 让反应虚拟 DOM 处理实际未呈现的内容可能会导致其他几个问题。

注意：我们不允许更改整体 UX。

更新：我们想要完成的是当用户在打开的标签之间跳转时尽可能简单地保存和加载状态。用户可以打开多个相同类型的选项卡。大多数选项卡具有撤消功能。这是一个具有 150 多个视图的大型应用程序（不包括所有较小的对话框）。为了尽可能无缝地从 redux 存储中保存/加载状态，最好检查一个组件（来自父级）的状态（只读）以保存它。今天我们有一个不错的解决方案，正如我提到的，我们将 previousState 作为道具，并在 componentWillUnmount 上调用 onSaveState 并使用当前状态。我不需要解释 redux 的工作原理，我只是感兴趣是否可以从外部（例如从父组件）检查组件的状态，而不是 hacky？

【问题讨论】：

查看这个答案stackoverflow.com/questions/44611905/…
为什么cloneElement会参与保存状态？我们在这里谈论的是 redux 状态吗？
正如我所写，cloneElement 用于注入一个方法（onSaveState）和先前的状态以避免将所有页面连接到存储，因此在一个地方处理 redux 存储操作。要回答您的第二个问题，是的，我们正在谈论 redux（正如我所写）。

标签： reactjs redux

【解决方案1】：

如果您有复杂的保存/加载代码，请不要将其全部放在父组件中并注入到子组件中。将其移动到孩子们可以自己使用的共享文件中。

将加载代码放入 reducer 文件中。将保存代码放在 action 文件中。然后让tab组件每个require新文件，这样他们就可以connect到reducer和dispatch这个action。

有关详细示例，请参阅 Redux Basics。

【讨论】：

这不是复杂的代码，它是一个调用（动作）来保存状态和加载只是访问商店，但开发人员仍然需要在所有组件中记住这一点。我们调用一个动作来保存，reducer 存储它。当前的解决方案是干净的，因为组件只需要检查 this.props.previousState 是否存在，然后在 compnentWillUnmount 上调用 onSaveState(this.state)。
糟糕，加载代码不进入reducer；我在想Fluxible。加载代码可以作为 getter 函数移动到商店。连接到存储和调度操作不应该过于冗长以至于需要合并和注入。