React 生命周期事件 - 子组件继承旧状态道具

Question

我对 React 中的状态和道具的理解可能有些不对劲。这是使用 React，基于 Redux 的应用程序。

场景：

我有一个全局 SVG 组件，它在 componentDidMount 方法中从应用程序获取视口的尺寸。

state 中 SVG 的默认（在应用程序初始化时）道具是：

dimension : {
 width : 0,
 height : 0
}

componentDidMount 从 DOM 检索 width 和 height 值并将值分派给状态。

现在我有一个 SVG 组件的子组件，它需要更新的 svg 宽度和高度值来计算 default viewbox 并再次更新状态。在挂载（重点）时只需要执行一次，因此viewbox的计算在子组件的componentDidMount中。

发生了什么：

不过，我猜是因为 React 批量更新 DOM，传递给子组件的 props 是默认的初始宽度和高度值，而不是 SVG 组件 [= 后的更新状态12=].

问题：

如何将更新后的状态传递给子组件的 componentDidMount。注：

我不能使用componentDidUpdate，这意味着每次更新组件时，它都会计算默认值并再次更新视图，从而覆盖用户位置。

Answer 1

你的情况是，在 parent 组件的 componentDidMount 执行之前，你的 child 组件被渲染，因此它接收到 default 道具。因此，在 parent 的 componentDidMount 中更新的道具将反映在您的 child 中作为更新的道具

您可以使用 child 组件中的 componentWillReceiveProps 函数来根据更新的道具设置状态。但是，每次从 parent 更新道具时都会执行此操作，因此您可以做的是从 parent 传递一些道具，这些道具在 componentDidMount 中设置为特定值parent 之后的值不同。基于 componentWillReceiveProp 中的这个属性，你可以设置 child 组件的初始状态。

Answer 2

如果您在 componentDidMount() 中设置状态，它将重新渲染组件。

如果你想使用 props，你应该在 componentWillReceiveProps(nextProps) 中工作，在 React 生命周期中是每次组件从父组件接收 props 时调用。

这似乎是您目前正在努力实现的目标。

React 生命周期事件 - 子组件继承旧状态道具

React Lifecycle Events - Child Component Inherits Old State Props

javascript

svg

reactjs

redux

react-redux