Содержимое, введенное в редакторе CodeMirror, неправильно отображается в предварительном просмотре. - PullRequest
1 голос
/ 06 октября 2019

У меня на странице есть компонент 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?

...