JSX HTML строковая переменная, отображаемая как текст

Question

У меня есть JSON файл с переменной htmlContent. Я пытаюсь отобразить это в компоненте, но когда он отображается, он показывает его в виде текста. Я просто хочу, чтобы текст был окружен тегом h2.

МОЙ JSON ФАЙЛ

const BookData = {
  data: [
    {
      id:"1",
      pageHeader:"Contents",
      htmlContent:`<h2>hello</h2>`,
      definePrototypes:"",
      exportComponent:"export default App;"
    }
  ]

};

МОЙ РЕАКЦИОННЫЙ КОМПОНЕНТ

      <section id='content'>
          {props.htmlContent }
          </section>

МОЙ АКТУАЛЬНЫЙ РЕЗУЛЬТАТ <h2>hello</h2>

МОЙ ОЖИДАЕМЫЙ РЕЗУЛЬТАТ привет

Answer 1

Вам необходимо использовать dangerouslySetInnerHTML для визуализации html содержимого в реагировать, в противном случае оно будет отображаться в виде строки

Изменение, которое необходимо внести в этот элемент

<section id='content'>
    {props.htmlContent }
</section>

Измените выше блок до

<section id='content' dangerouslySetInnerHTML={{ __html: props.htmlContent }}></section>

Это должно сделать работу. Проверьте ссылку для деталей https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

Answer 2

Если React импортируется в файл JS, вы можете просто удалить галочки (`) из JSON следующим образом:

 const BookData = {
  data: [
    {
      id:"1",
      pageHeader:"Contents",
      htmlContent:<h2>hello</h2>,
      definePrototypes:"",
      exportComponent:"export default App;"
    }
  ]

};

Answer 3

Попробуйте это

<div contentEditable='true' dangerouslySetInnerHTML={{ __html: props.htmlContent }}></div>

Непосредственный эффект от использования внутреннего HTML против dangerouslySetInnerHTML идентичен - узел DOM обновится с введенным HTML.

Однако За кулисами, когда вы используете dangerouslySetInnerHTML, это дает React знать, что HTML внутри этого компонента не то, о чем он заботится.

Поскольку React использует виртуальный DOM, когда он идет для сравнения различий по отношению к фактическому DOM, он может напрямую обходить проверку дочерних узлов этого узла, потому что он знает, что HTML исходит из другого источника. Таким образом, производительность повышается.

Что более важно - если вы просто используете inner HTML, React не сможет узнать, был ли изменен узел DOM. В следующий раз, когда вызывается функция рендеринга, React перезапишет содержимое, которое было введено вручную, с тем, что, по его мнению, должно быть правильным состоянием этого узла DOM.

Ваше решение использовать componentDidUpdate, чтобы всегда гарантировать содержание c Я полагаю, что это сработает, но во время каждого рендеринга может быть fla sh.

Reference Опасно установлен внутренний HTML