我可能会因为对状态的理解而得到一些不对劲的东西。 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
方法中从应用获取视口的尺寸。
componentDidMount
中SVG
的默认(在应用初始化时)道具:
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;再次更新视图,从而超越用户位置。答案 0 :(得分:1)
如果在 componentDidMount()中设置状态,则重新渲染组件。
如果你想使用 props ,你应该在 componentWillReceiveProps(nextProps)中工作,每当组件重新接收时,就会调用React生命周期来自父组件的>道具。
这似乎是你到目前为止所要达到的目标。
答案 1 :(得分:0)
在您的情况下发生的情况是,在父组件的componentDidMount
执行之前,您的子组件将被渲染,因此它会收到default
道具。因此,在父级的componentDidMount
中更新的道具将在您的孩子中反映为更新的道具
您可以在子组件中使用componentWillReceiveProps
函数来根据更新的道具设置状态。
然而,这将在每次从父级更新道具时执行,因此您可以做的是从父级传递一些道具,该父级在父级的componentDidMount
中设置了特定值,后来具有不同的值。基于componentWillReceiveProp
中的这个道具,您可以设置子组件的初始状态。