条件付きレンダリング

7444 ワード
テキストリンク
JSX内部で条件レンダリングを行う場合、通常は3つの演算子またはAND演算子が使用されます.
逆にIF文は使用できません.(使用するには、IIFEを使用する必要があります(関数表示はすぐに実行します).
import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        {
          1 + 1 === 2 
            ? (<div>맞아요!</div>)
            : (<div>틀려요!</div>)
        }
      </div>
    );
  }
}

export default App;
まず3つの演算子から見ます.
これで「はい」が見えます.
逆に、1+1=2の部分を1+1=3に変更します.ヨガを間違えることになります
AND演算子を使用します.
3つの演算子はtrueとfalseで使用されますが、AND演算子は私たちの条件がtrueの場合にのみ使用され、falseの場合、何も表示したくない場合に使用されます.
import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        {
          1 + 1 === 2 && (<div>맞아요!</div>)
        }
      </div>
    );
  }
}

export default App;
多くの場合、上記の方法で解決できますが、複雑な条件を書く必要がある場合があります.それらの条件はjsx以外で論理を記述することが望ましい.ただし、jsx内部で記述する必要がある場合はIIFEを使用する.
import React, { Component } from 'react';

class App extends Component {
  render() {
    const value = 1;
    return (
      <div>
        {
          (function() {
            if (value === 1) return (<div>하나</div>);
            if (value === 2) return (<div>둘</div>);
            if (value === 3) return (<div>셋</div>);
          })()
        }
      </div>
    );
  }
}

export default App;
ドアの代わりにスイッチドアを使えば大丈夫です.また、上のコードは次のように書くこともできます.
(() => {
  if (value === 1) return (<div>하나</div>);
  if (value === 2) return (<div>둘</div>);
  if (value === 3) return (<div>셋</div>);
})()
ここでは「矢印関数」と呼びます.
矢印関数はthis、arguments、superの概念がない匿名関数です.
Tiny Core Linux7のCoreをHDDにインストール
Htmlベース