リアクションライフサイクルイベント - 子コンポーネントは古い状態の小道具を継承します

Question

私は状態の私の理解で、おそらくReactの小道具を正しく取得していません。これはReact、Reduxベースのアプリを使用しています。

シナリオ：

IはcomponentDidMountメソッド内アプリからビューポートの寸法を取得するグローバルSVG成分を有します。 stateでSVGの

（アプリの初期化時に）デフォルトの小道具は、次のとおり

dimension : { 
width : 0, 
height : 0 
} 

componentDidMountはDOM からwidth & height値を取得し、状態に値をディスパッチします。

今私は&高さの値が再びデフォルトビューボックス&更新に状態を計算するように更新SVG幅を必要とするSVGコンポーネントの子コンポーネントを持っています。これは、実装時に（重要な点）の1度だけ実行する必要があるため、viewboxの計算は子コンポーネントのcomponentDidMountにあります。いただきましたハプニング

：

しかし、DOMを更新バッチに反応するので、私は推測する、子コンポーネントに渡された小道具はSVGコンポーネントのcomponentDidMount後にデフォルトの初期幅&高さの値ではなく、更新された状態です。

質問：

はどのように子コンポーネントのcomponentDidMountに更新された状態を渡すことができます。注：私は意味しますcomponentDidUpdate、コンポーネントが更新されるたびに使用することはできません

• 、それが過剰に乗っユーザーの位置を、それによって、デフォルト値は再びビューを更新&計算します。

Answer 1

componentDidMount（）に状態を設定すると、コンポーネントが再描画されます。

あなたは小道具を使用したい場合は、あなたがcomponentWillReceiveProps（nextProps）で動作するはずです、リアクトライフサイクルに小道具は親コンポーネントからコンポーネントreceaveたびに呼び出されていること。

これはあなたがこれまで達成しようとしているようです。

Answer 2

あなたのケースでは、親コンポーネントのcomponentDidMountが実行される前に、子コンポーネントがレンダリングされ、defaultの小道具を受け取ります。したがって、親のcomponentDidMountで更新される小道具は、子どもに更新された小道具として反映されます

componentWillReceiveProps機能を子コンポーネントで使用すると、更新された小道具に基づいて状態を設定できます。 しかし、これは親から更新されるたびに実行されるので、親のcomponentDidMountの特定の値で設定されている親からいくつかの小道具を渡し、後で別の値を持ちます。 componentWillReceivePropのこの小道具に基づいて、子コンポーネントの初期状態を設定できます。