如何从React UL中删除HTML /LI

Question

我在React中有一个用li填充的ul，并呈现给DOM，但它们显示的是HTML标记和内容。

​

​

示例：<strong>Wattage:</strong> 1100 Watts

我在很多地方尝试过使用dangerouslySetInnerHtml，但总是遇到错误(唯一的在线资源是简单的实现)。

下面是处理ul/li生成的相关代码：

  getFeatureList = ((itemDescription) => {
    return itemDescription[0].features.map((feature, index) => (
      <li key={index}> { feature }</li>
    ))
  })

  render() {
    const itemDescription = this.state.data ? this.state.data.ItemDescription : null;
    const featureList = itemDescription ? this.getFeatureList(itemDescription) : null;

    return (
      <div className="product-highlights-container">
        <div className="product-highlights-title">product highlights</div>
        <ul className="product-features">
          {featureList}
        </ul>
      </div>
    )
  }

当我尝试在<li key...周围的getFeaturedList中添加它时，我得到了一个错误。此外，我尝试在ul中执行{ __html: {featuredList}，但没有成功。

最终，我试图找出包含它的要点，这样li的呈现就不需要标签了。

任何帮助都是非常感谢的。

Answer 1

如果我没记错的话，您在getFeatureList中的itemDescription是这样构造的：

itemDescription = [
  {
    features: [
      '<strong>Wattage Output:</strong> 1100 Watts',
      '<strong>Number of speeds:</strong> 3', // etc etc
    ]
  }
]

对吗？如果不是，请添加itemDescription数据示例。

如果是这样的话，您应该添加

getFeatureList = ((itemDescription) => {
  return itemDescription[0].features.map((feature, index) => (
    <li key={index} dangerouslySetInnerHTML={__html: feature} />
  ))
})

或者，您可以使用react-render-html库并像这样使用它：

import renderHTML from 'react-render-html';

...
...

getFeatureList = ((itemDescription) => {
  return itemDescription[0].features.map((feature, index) => (
    <li key={index}>
      {renderHTML(feature)}
    </li>
  ))
})