Реагировать на приложение, отображающее HTML-объекты, такие как амперсанд, как экранированные

Question

У меня есть приложение React, встроенное в страницу Wordpress.Он извлекает контент из API-интерфейса JSON и отображает его в различных областях.

Моя проблема в том, что весь текстовый контент, который поступает из API, отображается как экранированные символы, т. Е. & показывает, где должен быть амперсанд.

Моя страница WordPress имеет <meta charSet="utf-8" />, которую я обычно ожидал бы преобразовать, но не оказывает влияния на содержимое React.Это потому, что рендеринг выполняется в React?В каком случае мне нужно как-то настроить React для использования UTF-8?

Answer 1

HTML (включая сущности) будет отображаться в виде строки при отображении в виде выражения:

{htmlString}

Для анализа HTML существует dangerouslySetInnerHTML prop:

<span dangerouslySetInnerHTML={{__html: htmlString }} />

Как видно из названия, это небезопасно, и его следует избегать.Если строка исходит из ненадежного источника или источника, который может быть использован, вредоносный код может быть передан клиенту.

Предпочтительным способом является конкретное декодирование объектов, например, с помощью html-entities:

import { Html5Entities } from 'html-entities';
const htmlEntities = new Html5Entities();

...

{htmlEntities.decode(htmlString)}

Эту проблему можно избежать, если по возможности не хранить сущности HTML.