gpt4 book ai didi

javascript - React 生命周期事件 - 子组件继承旧状态 Prop

转载 作者:行者123 更新时间:2023-11-30 15:28:47 24 4
gpt4 key购买 nike

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

场景:

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

stateSVG 的默认(在应用程序初始化时) Prop 是:

dimension : {
width : 0,
height : 0
}

componentDidMount 从 DOM 中检索 widthheight 值并将值分派(dispatch)给状态。

现在我有一个 SVG 组件的子组件,它需要更新的 svg 宽度和高度值来计算默认 View 框并再次更新状态。这只需要在挂载时执行一次(重点),因此viewbox 的计算是在子组件的componentDidMount 中。

发生了什么:

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

问题:

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

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

最佳答案

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

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

到目前为止,这似乎是您要实现的目标。

关于javascript - React 生命周期事件 - 子组件继承旧状态 Prop ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42555344/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com