条件付きレンダリング:
Reactの条件レンダリングはJavaScriptの条件処理と同じです.ifや条件演算子などのJavaScript演算子を使用して、現在の状態を表す別名を作成します.その後、Reactは現在のステータスに基づいてUIを更新します.if나 조건부 연산자와 같은 JavaScript 연산자를 현재 상태를 나타내는 엘리먼트를 만드는데 사용. 그러면 React는 현재 상태에 맞게 UI를 업데이트 해준다.

function Greeting(props) { 
const isLoggedIn = props.isLoggedIn; 
if (isLoggedIn) { 
	return <UserGreeting />; 
} else { 
	return <GeustGreeting />; } }

文の条件によって、UserGreeting構成部品をレンダーするか、GuestGreeting構成部品をレンダーするかが決まります.

要素変数

変数を使用して要素を含めることができます.これにより、残りの出力を変更せずにコンポーネントの一部を条件付きでレンダリングできます.
掲示板にタイトルとパスワードのタイトルが記載されていない場合は、赤いフォントが表示されます.

上記素子は、その現在の状態に応じてエラーを表示するか否かを決定する.
そして、それを子供に渡さなければなりません.
現在のフォルダ構造はcontainer/presenterモードですので、ご了承ください.

条件付き演算子の行内If-Else(3項演算子)

要素を条件付きでインラインに表示する別の方法は、JavaScriptの条件演算子conditionを使用しますか?true:false.
次の例では、条件付きで小さなテキストブロックをレンダリングします.

内容はpropsでisActiveでボタンの色を調節します.
コンテナで、必要条件にデータがある場合はtrue値を指定し、デフォルトはfalseに設定します.
上のコードから分かるように、isActiveがtrue(すべての必須値がある)の場合、黄色がない場合はgrayタグを使用します.

傍観者

?.「は?」前述の評価ターゲットがundefinedまたはnullの場合、評価を停止してundefinedに戻ります.

オフセットを使用してデータをフィルタします.fetchBoard.numberは安全にアクセスできます.
data?.fetchBoard.numberアドレスを読み込むと、データオブジェクトが存在しなくてもエラーは発生しません.以下に示します.
上記の例では、私たちは?の「は?」「前」評価対象のみに作用し,拡張しないことが分かる.
上記の例で使用したuserを参照してください.ユーザーがnullまたはundefinedの場合にのみ処理できます.
userがnullまたはundefinedでなく、実際の値がある場合はdataを使用する必要があります.FetchBoard Propertyは存在する必要があります.そうでなければデータですか?fetchBoard.number 2番目のポイント演算子でエラーが発生しました.