从数组项渲染 HTML答案

【问题标题】：Render HTML from array items从数组项渲染 HTML
【发布时间】：2016-07-07 09:58:11
【问题描述】：

我正在尝试呈现存储在数组中的 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 被转义并直接打印在输出中，而不是被解析为 HTML，而是作为一个公共字符串。

请注意，我不仅需要渲染链接，还需要 onClick 处理程序来执行特定操作（例如保存 cookie），因此链接也需要由 React 处理。

【问题讨论】：

你在使用 jsx 吗？如果是，为什么不return <a key={index}>{value.filterValue}</a>？
我很确定按照 Yury 说的去做会解决这个问题

标签： html arrays reactjs

【解决方案1】：

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

【讨论】：

【解决方案2】：

由于您有可用的 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，则可以使用它来进行更好的优化。它用于 React 的 diffing 算法。例如：<a key={value.id} href="#">${value.filterValue}</a>

【讨论】：

你没有从地图返回一些东西，并且抛出了一个 JS 错误：/
当匿名函数中有一个表达式时，返回是隐式的。
确实，在我的代码中，我使用了 { } 表示法，所以我猜它期望返回。