Как удалить HTML из React UL / LI

Question

У меня ul заполняется li s в React и отображается в 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 s отображал без тегов.

Любая помощь очень ценится.

Answer 1

Если я не ошибаюсь, ваш itemDescription внутри getFeatureList выглядит так:

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} />
  ))
})

Или вы можете использовать Reaction-render-html библиотека и используйте ее как:

import renderHTML from 'react-render-html';

...
...

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