🐣 [Reacct]公式 条件付きレンダー
作成日: 2021/12/23
4

https://ja.reactjs.org/docs/conditional-rendering.html

論理 && 演算子によるインライン If

if...elseより短い構文で書きたいとき↓

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}
{ unreadMessages.length > 0 && <h2>...</2> }

↑はunreadMessagesが1以上の時だけh2が表示される。
スネークゲームでも出てきたやつだ〜。

中括弧の中に式を埋め込めて、その中でまたh2みたいにタグ書けるの便利だなぁ。
JSXってすごい!

Vueだとv-if以外にどういう書き方があるんだろう?
お昼休みにやってみよう。

あれ、、このエディターでHTML書くと普通にタグが反映されてしまう...


制作会社でフロントのコーディングやWordpressのテーマ開発をしてます。 本命はJavascriptです😋 目指せフロントエンドエンジニア👊