配列アイテムからHTMLをレンダリングする

Question

配列に格納されたHTML要素（リンク）のリストをレンダリングしようとしています。

私は当初のような配列を構築しています：

const availableSizes = product.simples.filter((value) => { 
     return value.stockStatus === STATUS_AVAILABLE; 
}).map((value, index) => { 
     return `${value.filterValue} `; 
}); 

配列の内容の例は次のとおりです。

["35 ", "36 ", "36.5 ", "37.5 ", "38 ", "39 ", "39.5 ", "40 ", "41 ", "41.5 ", "42 ", "42.5 ", "43 ", "44 ", "44.5 ", "45 ", "46 ", "46.5 ", "48 ", "49 "] 

私は、各文字列は、このようなとして構築されている方法を変更しようとしました：

const availableSizes = product.simples.filter((value) => { 
     return value.stockStatus === STATUS_AVAILABLE; 
}).map((value, index) => { 
     return `<a href="#">${value.filterValue}</a>`; 
}); 

HTMLはエスケープされ、HTMとして解析されることなく出力に直接印刷されましたLではなく一般的な文字列として。

私はリンクをレンダリングする必要があるだけでなく、特定のアクション（たとえばクッキーを保存する）を行うonClickハンドラも必要とするので、リンクもReactでも処理する必要があります。 .mapで

Answer 1

を返す必要がありますがStringを返す：私は追加key={index}に

class MyComponent extends React.Component { 
    render() { 
    const availableSizes = product.simples 
     .filter((value) => value.stockStatus === STATUS_AVAILABLE) 
     .map((value, index) => <a key={index} href="#">${value.filterValue}</a>); 

    return (
     <div> 
     {availableSizes} 
     </div> 
    ); 
    } 
} 

ご注意を。 Reactはレンダリングプロセスを最適化するためにこれを必要とします。各製品に一意のIDがある場合は、より良い最適化のために代わりにそのIDを使用できます。 Reactのdiffingアルゴリズムで使用されています。例：<a key={value.id} href="#">${value.filterValue}</a>

Answer 2

あなたはあなたがJSXを用意してとして、あなたの代わりに次の操作を行うことができJSX

const availableSizes = product.simples.filter((value) => { 
    return value.stockStatus === STATUS_AVAILABLE; 
}).map((value, index) => { 
    return <a key={ index } href="#">{ value.filterValue }</a>; 
});