Безопасное отображение строк HTML в формате HTML

В этом сценарии проблема возникает при попытке отобразить обычную строку содержимого HTML, но она вместо этого отображается как строка, не интерпретируемая как HTML. Обычно это происходит, когда свойство, используемое в опасноSetInnerHTML, является объектом, а не строкой.

Чтобы решить эту проблему, убедитесь, что свойство this.props.match.description является строкой. Если это не так, преобразуйте его в HTML, прежде чем присваивать его свойству.

Обработка объектов HTML

При работе с объектами HTML возникают дополнительные сложности. В таких случаях вам потребуется декодировать объекты перед передачей их в опасноSetInnerHTML.

Пример кода

Рассмотрите следующий пример кода:

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      description: '
Our Opportunity:
',
    };
  }

  htmlDecode(input) {
    const e = document.createElement('div');
    e.innerHTML = input;
    return e.childNodes.length === 0 ? '' : e.childNodes[0].nodeValue;
  }

  render() {
    return (
      

    );
  }
}

ReactDOM.render(, document.getElementById('root'));

В этом примере свойство описания содержит объекты HTML (). Чтобы правильно отобразить его, функция htmlDecode используется для декодирования этих объектов перед передачей HTML в опасноSetInnerHTML.