Извлечь 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, которые выполняют определенные действия (например, сохранить файл cookie), поэтому ссылки также должны обрабатываться React.

Answer 1

Как вы уже JSX доступны вы можете сделать следующее вместо:

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> 
    ); 
    } 
} 

Обратите внимание на key={index}, что я добавил. Реагент нуждается в этом, чтобы оптимизировать процесс рендеринга. Если у вас есть уникальный идентификатор для каждого продукта, вы можете использовать его для лучшей оптимизации. Он используется в алгоритме React's diff. Например: <a key={value.id} href="#">${value.filterValue}</a>

Answer 2

В .map вы вернетесь String однако вы должны вернуть JSX

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