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

Question

Im probably getting something not right with my understanding of states & props in React. This is using React, Redux based app.

Scenario:

I have a global SVG component, which gets the dimensions of the viewport from the app within the componentDidMount method.

The default (upon initialisation of the app) props of the SVG in the state are:

dimension : {
 width : 0,
 height : 0
}

The componentDidMount retrieves the width & height values from the DOM and dispatches the values to the state.

Now I have a child component of SVG component, which needs the updated svg width & height values to calculate the default viewbox & update the state again. This needs to be executed only once upon mounting (important point) , hence the calcuation of the viewbox is in the componentDidMount of the child component.

Whats Happening:

However, I guess because of React batch updating the DOM, the props passed to the child component are the default initial width & height values, not the updated state after SVG component's componentDidMount .

Question:

How can I pass the updated state to componentDidMount of the child component. Note:

• I cannot use componentDidUpdate , which would mean, that everytime the component is updated, it will calculate the default values & update the view again, thereby, over-riding the user position.

Answer 1

If you set the state in componentDidMount() than it will re-render the component.

If you want to use the props , you should work in componentWillReceiveProps(nextProps) , that in the React life-cycle is called each time the component receave props from parent component.

That seems what you're trying to achieve so far.

Answer 2

What happens in your case is that before the componentDidMount of the parent component executes, your child component is rendered and hence it receives the default props. So the props that get updated in the componentDidMount of the parent will reflect in your child as the updated props

You can make use of componentWillReceiveProps function in the child component to set the state based on the updated props. However this will be executed everytime the props get updated from the parent, so what you can do is that pass some prop from the parent which is being set with a particular value in the componentDidMount of parent and later has a diffrent value. Based on this props in componentWillReceiveProp you can set the initial state of the child component.