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已被转义并直接打印在输出中，而不会将其解析为HTML，而是作为常见字符串。

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

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

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

从数组项呈现HTML

2 个答案: