条件レンダリング

反応における条件付きレンダリング
条件付きレンダリングとは
条件付きレンダリングは、どのようにして状態とユーザー入力に基づいてコンポーネントをレンダリングまたはレンダリングする機能を実装することによって特定のタスクを満たす専用コンポーネントを作成する方法です.幸いにも、我々はそれがバニラJavaScriptと同じように機能するように、反応の条件付きレンダリングに関する新しい機能を学ぶことを心配する必要はありません.条件付きレンダリングの例は、.
使用例:
大きな赤いボタンを想像してください.ボタンをクリックするたびに、ボタンがクリックされているかどうかを知りたい場合は、偶数または奇数量.ボタンをクリックしても、我々は、青色になるボタンをします.戻り値が奇数ならば、ボタンを黄色にする.
以下に、条件付きレンダリングをインラインで使用する例を示します.条件付きレンダリングに関するクールなものの1つは、AND &論理演算子を使用してステートメントを作成する場合です.私の意見では、この方法は比較的ユニークで賢いです.以下は、反応ドキュメントからのこのメソッドの挿入図です.
Docs EX 1に反応する.

render() {
  const count = 0;
  return (
    <div>
      {count && <h1>Messages: {count}</h1>}
    </div>
  );
}

インライン条件レンダリングのためのもう一つの面白い使用ケースはif/else三項文です;これは反応で最も有用な条件文であるかもしれません.想像できるように、我々は評価する条件がある.条件はtrueで、trueを返し、falseならばfalseを返します.再び、使用されるコードの量および結果としての機能性は、コードのラインに対する有用性の高い比率である.
反応ドキュメントEX 2.

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );
}

コンディション?true : false
私たちはこの小さな声明でたくさんのことをすることができます.