JSXは、次のコードは、JSXとして私のために正しくコンパイルされないループ

Question

ためでコンパイルされません：

let headerText = ""; 
    if (objArgs.column.name instanceof Array) { 
    headerText = <ul>; 
    objArgs.column.name.forEach((item, idx) => { 
     headerText = headerText + <li> + item + </li>; 
     return headerText; 
     } 
    ); 
    headerText = headerText + </ul>; 
    } 

私はちょうどJSXを使用して配列のうち、リストを作成したいです。このエラーは、ブラケットが適切でないことを示しています。 JSX要素を削除するとすぐに再び機能します。このスニペットでJSXを正しく使用していますか？あなたはJSXを連結しようとしている

Answer 1

は、文字列の中にノード：

let headerText = ""; 
... 
headerText = headerText + <li> + item + </li> 

これはJSXがどのように動作するかではありません。 JSXは、innerHTMLで設定されたHTML文字列を作成するようなものではありません。 ReactがHTMLにレンダリングするのはオブジェクトノード構造であり、JSX < >構文は、JSXノードを返す関数呼び出しを記述する宣言的な方法に過ぎません。今、あなたは全体のheaderTextどこかをレンダリングすることができます

let headerText; 
if (objArgs.column.name instanceof Array) { 
    headerText = <ul> 
    { objArgs.column.name.map(item => <li>{item}</li>) } 
    </ul>; 
} 

：あなたはおそらく欲しい

はこのようなものです。

注

headerText
• はnull（空のレンダリング）またはJSXノード（リストをレンダリング）の配列です。
• { value }を使用して有効なJS値をJSXでレンダリングします（+ value +ではなく）。
• Array.map()を使用して、配列をJSXノードに変換し、<ul>{ array.map(...) }</ul>などの別のJSXノード内にレンダリングすることができます。配列がJSXにレンダリングされる一般的な方法です。
• <li>のアイテムshould have a keyは、<li key={item.id}>です。配列index as key is not a good ideaを使用し、itemを使用すると、すべての項目が一意である場合はとなります。（およびプリミティブ値）。