React Lifecycle Events - 子组件继承旧状态道具

时间:2017-03-02 12:18:45

标签: javascript reactjs svg redux react-redux

我可能会因为对状态的理解而得到一些不对劲的东西。 React中的道具。这是使用基于React,Redux的应用程序。

情境:

我有一个全局from bs4 import BeautifulSoup html = '''<td><b>First Type :</b>W<br><b>Second Type :</b>65<br><b>Third Type :</b>3</td>''' soup = BeautifulSoup(html, 'lxml') td = soup.find('td') string = str(td) list_tags = string.split('</b>') list_needed = [] for i in range(1, len(list_tags)): if list_tags[i][0] == '<': list_needed.append('') else: list_needed.append(list_tags[i][0]) print(list_needed) #['W', '65', '3'] 组件,它在SVG方法中从应用获取视口的尺寸。

componentDidMountSVG的默认(在应用初始化时)道具:

state

dimension : { width : 0, height : 0 } 检索componentDidMount&amp;来自DOM的width值 并将值分派给州。

现在我有一个height组件的子组件,它需要更新的svg width&amp;高度值来计算默认视图框&amp;再次更新状态。这只需要在挂载(重要点)时执行一次,因此SVG的计算位于子组件的viewbox中。

发生了什么:

但是,我想因为React批量更新DOM,传递给子组件的道具是默认的初始宽度&amp;高度值,而不是componentDidMount组件SVG之后的更新状态。

问题:

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

  • 我不能使用componentDidMount,这意味着,每次更新组件时,它都会计算默认值&amp;再次更新视图,从而超越用户位置。

2 个答案:

答案 0 :(得分:1)

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

如果你想使用 props ,你应该在 componentWillReceiveProps(nextProps)中工作,每当组件重新接收时,就会调用React生命周期来自父组件的>道具。

这似乎是你到目前为止所要达到的目标。

答案 1 :(得分:0)

在您的情况下发生的情况是,在父组件的componentDidMount执行之前,您的子组件将被渲染,因此它会收到default道具。因此,在父级的componentDidMount中更新的道具将在您的孩子中反映为更新的道具

您可以在子组件中使用componentWillReceiveProps函数来根据更新的道具设置状态。 然而,这将在每次从父级更新道具时执行,因此您可以做的是从父级传递一些道具,该父级在父级的componentDidMount中设置了特定值,后来具有不同的值。基于componentWillReceiveProp中的这个道具,您可以设置子组件的初始状态。