Экранированная HTML-разметка отображается в опасноSetInnerHTML?

У меня есть настройка блога Gatsby + WP API (с включенной разметкой), и она отлично работает, за исключением случаев, когда я пытаюсь отобразить разметку HTML в виде фрагментов кода. Я использую escape-символы (см. Ниже), но по какой-то причине HTML внутри тегов _1 _ / _ 2_ отображается как фактический HTML, а не как фрагмент кода HTML.

Я понимаю, что dangerouslySetInnerHTML нужно делать, но я не думал, что это будет, если я использую escape-символ <?

Вот разметка в сообщении в блоге WP ..

<pre class="language-markup"><code>
  &lt;div&gt;
    &lt;p&gt;Lorem ipsum...&lt;/p&gt;
  &lt;/div&gt;
</code></pre>

И вот как я отображаю весь контент поста в компоненте реакции ...

<section className="article-body" itemProp="articleBody"
  dangerouslySetInnerHTML={{ __html: this.props.html }}
/>

Теги <div> и <p> отображаются как HTML, а не как фрагменты кода.

Отрисовка HTML-разметки внутри тега кода

Есть ли другой способ сделать это? Для записи я также пробовал это, используя «безопасный» метод (react-render- html) с теми же результатами.

- ОБНОВЛЕНИЕ: -

Мне удалось отобразить HTML как фрагмент кода, заменив тег <code> на <xmp>. Я знаю, что этот тег больше не поддерживается официально, и он далек от элегантности, поэтому я думаю, что могу попытаться отделить фрагменты кода от остального содержимого, как предлагается ниже.


reactjs wordpress html gatsby wp-api
person Ben Adams    schedule 27.07.2018    source источник
comment
Кажется, нормально работает в CodeSandbox, вы можете опубликовать свой CSS?   -  person Colin Ricardo    schedule 27.07.2018
comment
@Colin хороший момент, я использую Prism для выделения синтаксиса, удалил его, и теперь теги div / p по крайней мере отображаются в инспекторе, но все еще не отображаются в блоке кода ... вместо этого они отображаются как обычный HTML. Позвольте мне обновить выпуск ..   -  person Ben Adams    schedule 27.07.2018
comment
Что вы видите в инспекторе GraphiQL по адресу localhost: 8000 / ___ graphql во время работы Gatsby? Вы можете добавить это к вопросу?   -  person chmac    schedule 01.08.2018

Ответы (1)


arrow_upward
0
arrow_downward

Я тоже пробовал это в CodeSandbox - работает как положено. Если вы уверены в данных (экранировании), полученных от WP API, я боюсь, что это проблема Гэтсби. Должно быть место, где оно изменено (неэкранировано).

Если с данными все в порядке и вы не хотите проводить глубокую проверку, можно найти обходной путь. Разделите тело статьи и обработайте разделы отдельно - тексты и фрагменты кода. Вторая упаковка с литералом кода с sth следующим образом:

const CodeBlock = (props) => {
  return <section className="article-code">
    <pre className="language"><code>{`${props.html}`}</code></pre>
  </section>
}

Конечно, удалите неиспользуемые первую и последнюю строку исходного блока кода / фрагмента.

person xadm    schedule 28.07.2018
comment
Спасибо! Да, думаю, мне придется отделить фрагменты кода от остального контента. Для записи я добился правильного отображения HTML, заменив тег <code> на <xmp>. - person Ben Adams; 30.07.2018
comment
Разделение даст вам возможность использовать несколько готовых библиотек / компонентов подсветки синтаксиса. - person xadm; 30.07.2018
comment
Однако для этого вам потребуется знать, где каждый блок кода будет размещен внутри вашей статьи. Думаю, в Гэтсби это не сработает. Это может быть в обычном приложении React. - person chmac; 01.08.2018
comment
В WP контент (статья) находится в одном блоке (даже редактируется Гутенбергом). Разделение смешанного контента на цепочку / список «типизированных» блоков (или более детализированных абзацев), конечно, означает сохранение их порядка. Вы должны иметь возможность отображать все содержимое / структуру статьи (множество блоков текста и кода) точно так же, как при использовании шаблонов / тем php. Я почти уверен, что это выполнимо в Гэтсби;) - person xadm; 01.08.2018