如何从React UL / LI中删除HTML

Question

我在React中用ul填充了li，并呈现给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>
    )
  }

当我尝试将其添加到getFeaturedList附近的<li key...中时，出现错误。另外，我尝试在{ __html: {featuredList}内做ul，但是没有运气。

最终，我试图弄清楚要包括什么点，以便li呈现不带标签的

。

非常感谢您的帮助。

Answer 1

If I'm not mistaken, your itemDescription inside the getFeatureList is constructed like this:

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

right? If it's not, please add a sample of the itemDescription data.

if that's the case, you should add

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

Or you can use react-render-html library and use it like:

import renderHTML from 'react-render-html';

...
...

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