htmlレンダリングのオプションパーツのベストプラクティス

Question

アイテムのリストを条件付きでレンダリングするには良い方法があると思っていました。 、醜い

text = (
 
\t <div>Orange fields are not mandatory, are you sure you want to submit without : 
 
\t \t <ul> 
 
\t \t \t {(() => { 
 
\t \t \t \t if (e.infos.error === "warning") 
 
\t \t \t \t \t return <li>informations</li> 
 
\t \t \t })()} 
 
\t \t \t {(() => { 
 
\t \t \t \t if (e.links.error === "warning") 
 
\t \t \t \t \t return <li>links</li> 
 
\t \t \t })()} 
 
\t \t \t {(() => { 
 
\t \t \t \t if (e.file.error === "warning") 
 
\t \t \t \t \t return <li>file</li> 
 
\t \t \t })()} 
 
\t \t </ul> 
 
\t </div>);

：警告があるかどう基本的に私は警告メッセージをレンダリングするには、私はここに私の現在のアプローチであり、すべての問題のリストを含むようにメッセージをレンダリングしたいですしかし、私は何かをテストしたかったので、私が撮った別のアプローチは、そのようなものだった：

function optionalWarning(props) { 
 
    if (props.error === "warning") 
 
    return <li>{props.message}</li>; 
 
    return null; 
 
} 
 

 
.... 
 

 
text = (
 
\t <div>Orange fields are not mandatory, are you sure you want to submit without : 
 
\t \t <ul> 
 
     <optionalWarning error="e.infos.error" message="informations" /> 
 
     <optionalWarning error="e.links.error" message="links" /> 
 
     <optionalWarning error="e.file.error" message="file" /> 
 
\t \t </ul> 
 
\t </div>);

これはきれいですが、私はそれを行うために外部機能を持たなければならないという事実が気に入らず、ベストプラクティスは第2のものだと思いますが、他の方法がありますか？

Answer 1

conditional renderingにternary operatorを使用すると、JSX内の条件を簡単に書き込むことができます。このよう

：

は

<div>Orange fields are not mandatory, are you sure you want to submit without : 
    <ul> 

     {e.infos.error === "warning" ? <li>informations</li> : null } 

     {e.links.error === "warning" ? <li>links</li> : null} 

     {e.file.error === "warning" ? <li>file</li> : null} 

    </ul> 
</div> 

Answer 2

私は行くだろう：使用logical operators

<ul> 
    { e.infos.error === "warning" && <li>informations</li> } 
    { e.links.error === "warning" && <li>links</li> } 
    { e.file.error === "warning" && <li>file</li> } 
</ul> 

Answer 3

- 左側がtruthyであれば、これらのステートメントの右側にのみ使用されます。

その他の場合、左側がfalse,undefinedまたはnullの場合、Reactは何も表示しません。例えば ​​- あなたのチェックが失敗したときに常にfalse、undefinedまたはnull結果を保証するために注意する必要があり

<div>Orange fields are not mandatory, are you sure you want to submit without : 
    <ul> 
    {e.infos.error === "warning" && <li>informations</li>} 
    {e.links.error === "warning" && <li>links</li>} 
    {e.file.error === "warning" && <li>file</li>} 
    </ul> 
</div> 

---

{list.length && <Something/>}でリストの長さをチェックしている場合、リストが空の場合、これは0となり、Reactはそれをテキストとしてレンダリングしますが、{list.length > 0 && <Something/>}のようなチェックは期待通りに機能します。