Lifecycle&条件レンダリング

2346 ワード

React テキストリンク

ライフサイクル

constructor

render

componentDidMount

(キャプチャ完了)

(setState)

render

コンポーネント更新

componentWillUnmount

親APIから受信したデータをpropsとしてサブAPIに渡し、サブAPIでデータにアクセスする

構成部品を上記のように構成すると、以下のように表示されます.

要素関数で特定の値に基づいて選択的にレンダリングされることを조건부 렌더링(conditional rendering)と呼ぶ.
条件付きレンダリングを実施する場合、3つの演算子が有用である場合がありますが、ほとんどの場合、&&연산자の方が読み取り可能です.

変数が数値タイプの場合、0はfalseです.

変数が文字列タイプである場合、空の文字列“”もfalseである.

list && list.map((item, index) => {...})

list?.map((item, index) => {...})

また、上記のコードを光学ギャップでより簡潔に表示することもできます.以下に示します.

ライフサイクルの順序によっては、上記のエラーが発生する可能性がありますので、必要に応じて条件を使用してレンダリングしてください.

この問題について(Lifecycle&条件レンダリング), 我々は、より多くの情報をここで見つけました https://velog.io/@gunu/Lifecycle-조건부-렌더링

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol