この文章はMZ's Develogに移った。

💡 中に入る。

ベロフトとのモダン反応の条件付きレンダリングを読んでまとめた文章
条件レンダリングの3つの演算子と&演算子適用コードをまとめました.

📝 条件レンダリングの概念

特定の条件に基づいて異なる成果物をレンダリングすることを示します.

🎯 props値に応じて異なるビューを設定する

props値に条件レンダリングを設定すると、大きく2つに分けることができます.

特定のビューを表示または非表示にする

複数のビューの1つを表示

1つ目の場合は&&演算子を推奨し、2つ目の場合は3つの演算子を推奨します.
サンプルコードを次に示します.

🔎 App.js Code

App構成部品からHello構成部品にisSpecial true値を送信します.
1番目のHello構成部品のみisSpecial値をtrueに設定し、2番目の構成部品は設定しません.
注意:propsにtrue値を1つ与えると、={true}部分をスキップし、isspecialのように少なくともprops名をチェックできます.

import React from 'react';
import Hello from './Hello';
import Wrapper from './Wrapper';


function App() {
  return (
    <Wrapper>
      <Hello name="react" color="red" isSpecial={true}/>
      <Hello color="pink" />
    </Wrapper>
  )
}

export default App;

🔎 Hello.js Code

isSpecial値がtrueの場合、*が表示されます.そうでない場合nullが表示されます.
3つの演算子が使用されています.
注:null、false、undefinedがJSXでレンダリングされている場合は、何も表示されません.

import React from 'react';

function Hello({ color, name, isSpecial }) {
  return (
    <div style={{ color }}>
      { isSpecial ? <b>*</b> : null }
      안녕하세요 {name}
    </div>
  );
}

Hello.defaultProps = {
  name: '이름없음'
}

export default Hello;

💻 実行結果

最初のHello構成部品は、isSpecial値がtrueであるため*を表示します.
2番目のHello要素は*が存在しないと判断することができる.

......

新しい号では、記事のすべてを表示できます。