☰

React レンダリング関数で if...else... ステートメントを使用することは可能ですか? 質問する

tag-icon • tag-icon reactjs
React レンダリング関数で if...else... ステートメントを使用することは可能ですか? 質問する

基本的に、私は React コンポーネントを持っており、そのrender()関数本体は以下のとおりです。(これは私の理想的なものであり、現在は動作していません)

render(){
    return (
        <div>
            <Element1/>
            <Element2/>

            // note: logic only, code does not work here
            if (this.props.hasImage) <ElementWithImage/>
            else <ElementWithoutImage/>

        </div>
    )
}

ベストアンサー1

まったく同じではありませんが、回避策はあります。Reactのドキュメント条件付きレンダリングについて、ぜひご覧ください。インライン if-else を使用して実行できる例を次に示します。

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      {isLoggedIn ? (
        <LogoutButton onClick={this.handleLogoutClick} />
      ) : (
        <LoginButton onClick={this.handleLoginClick} />
      )}
    </div>
  );
}

レンダリング関数内で、jsx を返す前に処理することもできます。

if (isLoggedIn) {
  button = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
  button = <LoginButton onClick={this.handleLoginClick} />;
}

return (
  <div>
    <Greeting isLoggedIn={isLoggedIn} />
    {button}
  </div>
);

ZekeDroid がコメントで指摘したことについても触れておく価値があります。条件をチェックするだけで、準拠していない特定のコードをレンダリングしたくない場合は、 を使用できます&& operator。

  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );

おすすめ記事