web-dev-qa-db-ja.com

reactjs JSXでネストされたif elseステートメントを実行するにはどうすればよいですか？

reactjsjsxにある場合、ネストされた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の場合は、インラインソリューションを使用できると思います。

ありがとうございました

javascriptreactjsecmascript-6jsx
32
ALM

タイトルと本文をコンテナにラップする必要があります。それはdivかもしれません。代わりにlistを使用すると、dom内の要素が1つ少なくなります。

{ this.state.loadingPage
  ? <span className="sr-only">Loading... Registered Devices</span>
  : [
      (this.state.someBoolean
        ? <div key='0'>some title</div>
        : null
      ),
      <div key='1'>body</div>
    ]
}

読みにくいので、3項のステートメントをネストすることはお勧めしません。時々、3進法を使用するよりも「早く戻る」方がエレガントな場合があります。また、3進数の本当の部分だけが必要な場合は、isBool && componentを使用できます。

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

  return [
    (this.state.someBoolean && <div key='0'>some title</div>),
    <div key='1'>body</div>
  ];
}

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

構文someBoolean && "stuff"に注意してください：間違ってsomeBooleanが0またはNaNに設定されている場合、そのNumberはDOMにレンダリングされます。したがって、「ブール値」が偽の数である場合、(someBoolean ? "stuff" : null)を使用する方が安全です。

44
Neal Ehardt

推奨されるように三項演算子をネストしたり、他の場所で再利用されない別の関数を作成する代わりに、インライン式を呼び出すことができます。

<div className="some-container">
{
   (() => {
       if (conditionOne)
          return <span>One</span>
       if (conditionTwo)
          return <span>Two</span>
       else (conditionOne)
          return <span>Three</span>
   })()
}
</div>
15
dehumanizer

代替のコードは有効なJavaScript/JSX式ではありません：

(
  this.state.someBoolean ?
  (<div>some title</div>):(<div>some other title</div>)
  <div>body</div>
)

これを簡単にしましょう

(
  true ? 42 : 21
  3
)

これはエラーをスローします

キャッチされていないSyntaxError：予期しない番号（…）

2つの式を並べて配置することはできません。

代わりに、条件演算子のfalseブランチから単一の値を返す必要があります。これを行うには、単純に別のJSX要素に配置します。

(
  <div>
    {this.state.someBoolean ? (<div>some title</div>) : (<div>some other title</div>)}
    <div>body</div>
  </div>
)

「他のタイトル」が表示されているときに「本文」のみを表示する場合は、<div>body</div>を条件演算子のfalseブランチに追加します。

(
  this.state.someBoolean ?
    (<div>some title</div>) :
    (<div>
       <div>some other title</div>
       <div>body</div>
    </div>)
)

または多分あなたが欲しい

(
  <div>
    {this.state.someBoolean ? (<div>some title</div>) : null}
    <div>body</body>
  </div>
)
6
Felix Kling

以下のように、複数の条件をチェックして、それに応じてコンポーネントをレンダリングできます。

  this.state.route === 'projects'
  ? 
  <div> <Navigation onRouteChange={this.onRouteChange}/> Projects</div>
  :
  this.state.route === 'about'
  ?
  <div> <Navigation onRouteChange={this.onRouteChange}/> About</div>
  :
  this.state.route === 'contact'
  ?
  <div> <Navigation onRouteChange={this.onRouteChange}/> Contact</div>
  :
  <p> default </p>
1
Akshata Dabade

他の答えが示唆するように、反応する場合はネストされた他の方法を行うためのさまざまな方法があります。どちらを使用するかは、状況と好みによって異なります。

私の意見では、最高のコード読みやすさのために、この機会に、別の機能に他のコンテンツを移動するのが最善でしょう。

renderContent() {
     return (
         <div>
             { this.otherCondition && <div>title</div> }
             <div>body</div>
         </div>
     );
}

render() {
    return (
        <div>
            { ... }
            {
                this.state.loadingPage ?
                    <div>loading page</div>
                    :
                    this.renderContent()
            }
            { ... }
        </div>
    )
}

または、それが十分に単純な場合（他の要素がレンダリングされない場合）、私は行きます：

render() {
    if (this.state.loadingPage) {
        return (
            <div>loading page</div>
        )
    }
    return (
        <div>
            { this.otherCondition && <div>title</div> }
            <div>body</div>
        </div>
    );
}

Reactでの条件付きレンダリングに関する記事 ですので、このトピックの詳細に興味がある場合はチェックしてください。

0
Nesha Zoric