React/JSXで優雅に条件付きレンダリングを処理する：nullで空の要素を返す

など）を生成することができます。ただし、特定のアイテムがレンダリング条件を満たしていない場合、マップ機能の「他の」ブランチをどのように処理するかは、しばしばいくつかの問題を引き起こします。

次のシナリオを考慮して、マップ関数は、内部ロジックに基づいてデータアロコンポーネントをレンダリングするかどうかを決定します（最終的にはHTML

としてレンダリングされます）：

 const recidentienceRows = credentials.map（（credential_record）=> {
    もし （
      credential_record.state === 'Active' && // sample logic recidential_record.credential_proposal_dict！== null
    ）{
      const recidentient_id = credential_record.credential_exchange_id;
      const recidentientState = credentively_record.state.replaceall（ '_'、 ''）|| '';
      const dateCreated = new Date（credentivelisent_record.created_at）.tolocalestring（）|| '';

      let recidentientientive_record.credential_proposal_dict？.schema_name.replaceall（ '_'、 ''）|| '';

      戻る （
        <datarow key="{credential_id}" onclick="{（）="> { / * ... * /}}
        >
          <datacell> {credentienceName} </datacell>
          <datacell classname="title-case"> {credentienceState} </datacell>
          <datacell> {dateCreated} </datacell>
        </datarow>
      ）;
    }
    // else Branchがありません}）;

//レンダリング：
// <tbody> {credentienceRows} </tbody>

このコードは、IF条件が満たされていないときに明示的な返品値がないため、「矢印関数の終わりに値を返すと予想される」などのESLINT警告をすぐに提起します。この問題を解決するために、開発者は次のことを試みることができます。

1. 空の文字列（ ''）を返します： race/jsxは通常、要素が必要な空の文字列を直接戻すことを許可しないため、エラーや警告がレンダリングされる可能性があります。
2. 空のjsx要素（ または）を返します：空のDatarowが返された場合、Reactは重要な属性を提供するために必要です。ただし、レンダリングすべきではない「プレースホルダー」要素の場合、意味のあるキーを持っていないことがよくあります。

これらの試みはどれも優雅に問題を解決することはできませんが、代わりに新しい複雑さやエラーを導入します。

解決策：nullを返します

Reactでは、条件付きレンダリングを処理するためのベストプラクティスは、何もレンダリングしたくない場合に直接NULLを返すことです。 Reactは、null、未定義、およびブール値（True、false）を無視します。これは、それらがDOMにレンダリングされないことを意味します。

条件が満たされていないときにnullを返すように上記のコードを変更すると、ESLINTの警告とレンダリングの問題が完全に解決できます。

 const recidentienceRows = credentials.map（（credential_record）=> {
    もし （
      credential_record.state === 'Active' && // sample logic recidential_record.credential_proposal_dict！== null
    ）{
      const recidentient_id = credential_record.credential_exchange_id;
      const recidentientState = credentively_record.state.replaceall（ '_'、 ''）|| '';
      const dateCreated = new Date（credentivelisent_record.created_at）.tolocalestring（）|| '';

      let recidentientientive_record.credential_proposal_dict？.schema_name.replaceall（ '_'、 ''）|| '';

      戻る （
        <datarow key="{credential_id}" onclick="{（）="> { / * ... * /}}
        >
          <datacell> {credentienceName} </datacell>
          <datacell classname="title-case"> {credentienceState} </datacell>
          <datacell> {dateCreated} </datacell>
        </datarow>
      ）;
    }
    //条件が満たされないときにnullを返します
    nullを返します。
}）;

//レンダリング：
// <tbody> {credentienceRows} </tbody>

nullを返すことにより、資格情報アレイには有効なJSX要素とnull値が含まれます。 Reactがレンダリング

{credentienceRows} を使用すると、すべてのnull値を自動的にスキップし、実際にDatarowコンポーネントを返すアイテムのみをレンダリングします。これにより、ESLINTの警告を解決するだけでなく、不必要なDOM要素のレンダリングと重要な属性の問題も回避します。

メモとベストプラクティス

1. null vs未定義：未定義はレンダリングではないという効果を達成することもできますが、nullは「コンテンツなし」または「レンダリングなし」を示す場合、より一般的に使用される慣習であり、より明確なセマンティックの選択です。

2. フィルター配列対条件はnullを返します：

   • 条件付きリターンNULL：条件付きロジックが比較的単純で、配列の長さまたはインデックスに影響しないシナリオに適しています。その利点は、コードが直接的であり、各元のデータ項目に対応するレンダリングロジックを簡単に理解できることです。
   • 最初に配列をフィルタリングし、次にマップします。レンダリングするアイテムが元の配列のサブセットである場合、生成された配列にレンダリングする要素のみを含める場合、次にフィルターメソッドを使用して最初に元の配列をフィルタリングし、次にマップでレンダリングすることがより明確な選択です。

    //例：最初にフィルタリングしてからマップします
   const activecredentionrows = credentials
     .filter（credential_record => 
       credential_record.state === 'Active' && 
       credential_record.credential_proposal_dict！== null
     ））
     .map（（credential_record）=> {
       const recidentient_id = credential_record.credential_exchange_id;
       // ...その他のロジックリターン（
         <datarow key="{credentientientive_id}" onclick="{（）="> { / * ... * /}}>
           {/ * ... */}
         </datarow>
       ）;
     }）;
   
   // <tbody> {activecredentialrows} </tbody>

   選択する方法は、特定のビジネスロジックと個人的な好みに依存します。フィルタリング条件が複雑な場合、またはマップ結果アレイに有効なJSX要素のみを含める場合、フィルターがより適切になります。条件付きレンダリングがマップ内の単純なブランチである場合、nullを直接返す方が簡潔です。

3. 読みやすさ： clear if ... else return null;構造により、コードの意図が明確で維持が簡単になります。

要約します

React/JSX、特にMAP機能内の内部では、最もエレガントで反応仕様の方法は、要素をレンダリングしたくない場合に直接NULLを返すことです。これにより、Eslintの警告を解決するだけでなく、Reactがこれらの「空の」アイテムを正しく無視することを保証し、コードをきちんと保守可能に保ちながら、DOMに不要な要素を作成することを避けます。特定のシナリオに応じて、開発者はマップの前にフィルターを使用してデータを前処理して同様の結果を達成することも検討することもできます。