從數組項目呈現HTML

我試圖呈現存儲在數組中的HTML元素（鏈接）列表。從數組項目呈現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處理。

來源

2016-07-07 George Katsanos

您使用的是jsx嗎？如果是，爲什麼不'返回{value.filterValue}'？ –

我很確定這樣做是如何Yury說會解決這個 – Borjante

當你有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需要這個來優化渲染過程。如果每個產品都有唯一的ID，則可以使用該ID來更好地進行優化。它用於React的差異算法。例如：<a key={value.id} href="#">${value.filterValue}</a>

來源

2016-07-07 10:04:33 ctrlplusb

你沒有從地圖返回的東西，並有拋出一個JS錯誤：/ –

當你在一個匿名函數中有一個表達式時，返回是隱式的。 – ctrlplusb

事實上，在我的代碼中，我使用了{}符號，所以我猜想它會返回。 –

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

來源

2016-07-07 10:03:32

從數組項目呈現HTML

回答

相關問題