У меня на странице есть компонент codemirror, который выглядит следующим образом:
<CodeMirror
value={this.state.value}
options={options}
onBeforeChange={(editor, data, value) => {
this.setState({value: value});
}}
onChange={(editor, data, value) => {
}}
/>
У меня на странице есть кнопка, которая при нажатии получает состояние содержимого codemirror и просто принимает это значение иобновляет мой магазин редуксов. Затем я отображаю содержимое внутри элемента div, как предварительный просмотр того, что было введено в редакторе codemirror.
updatePreview() {
const { dispatch } = this.props;
console.log('calling updatePreview with value:' + this.state.value);
dispatch(EditorActions.updatePreview(this.state.value));
}
Предварительный просмотр - это просто получение значения из redux:
<div className="preview">
<h2>Preview</h2>
{editor.preview}
</div>
ЧтоЯ вижу, что, если я ввожу HTML в редактор, он отображает теги HTML в браузере, а не отображаемый элемент, например, символ h1 или жирный шрифт.
Почему HTML-рендеринг выполняется неправильно, и онвместо этого отображаются реальные теги HTML?