[解決済み] ReactJSのJSXでネストされたif elseステートメントを行うには？

質問

ReactJSのJSXでif else ifをネストさせることが可能かどうか知りたいのですが。

いろいろな方法を試しましたが、うまくいきません。

私が探しているのは

if (x) {
  loading screen
} else {
  if (y) {
    possible title if we need it
  }
  main 
}

これを試したのですが、レンダリングができません。 様々な方法を試してみました。 私はネストされたifを追加すると、それは常に壊れます。

{
  this.state.loadingPage ? (
    <div>loading page</div>
  ) : (
    <div>
      this.otherCondition && <div>title</div>
      <div>body</div>
    </div>
  );
}

更新

私は結局、これをrenderContentに移動して関数を呼び出すという解決策を選択しました。 しかし、両方の回答が機能しました。 私は、それが単純なレンダリングのためであればインラインソリューションを使用し、より複雑なケースのためにrenderContentを使用するかもしれないと思います。

ありがとうございます。

どのように解決するのですか？

タイトルとボディをコンテナで囲む必要があります。それはdivでも構いません。もしあなたが フラグメント を使えば、domの要素が一つ減ります。

{ this.state.loadingPage
  ? <span className="sr-only">Loading... Registered Devices</span>
  : <>
      {this.state.someBoolean
        ? <div>some title</div>
        : null
      }
      <div>body</div>
    </>
}

読みにくいので、3項文の入れ子にはしないことをお勧めします。3 項を使うよりも "return early" とした方がエレガントな場合もあります。また isBool && component を使うこともできます。

renderContent() {
  if (this.state.loadingPage) {
    return <span className="sr-only">Loading... Registered Devices</span>;
  }

  return (
    <>
      {this.state.someBoolean && <div>some title</div>}
      <div>body</div>
    </>
  );
}

render() {
  return <div className="outer-wrapper">{ this.renderContent() }</div>;
}

構文に関する注意点 someBoolean && "stuff" : 間違えて someBoolean が 0 または NaN と記述すると、そのNumberはDOMにレンダリングされます。したがって、もし"boolean"が ファルシーナンバー であるならば、より安全なのは (someBoolean ? "stuff" : null) .