Рендеринг HTML-тегов правильно в React

Question

Мне нужно создать текстовый модуль в React, я тоже использую JSX; Я получу данные из файла JSON. Например:

{ "text-data": "text": "<small> Hello world </small>" }

Я пытался сделать что-то вроде этого в моем модуле: <p> {this.props.textData.text}</p>

Когда я пытаюсь сделать это в моем файле JSX, он показывает, как простой текст с тегами включены. Я исследовал, и я обнаружил, что могу использовать эту функцию «Dangerously Set innerHTML», но это не рекомендуется, потому что это может вызвать атаку XSS. Я читал здесь другие ответы об этом, которые говорят, что использование HTML-сущностей работает; но я пока не могу сделать эту работу.

Answer 1

dangerouslySetInnerHTML Опора для таких случаев. По сути, вы говорите, что вы полностью доверяете html, который вы выводите, и что он действительный html. Вы не хотели бы использовать его для ввода пользователем (если это абсолютно необходимо и тщательно не проверено).

Для получения дополнительной информации см. React documentation. Существует также предыдущий аналогичный StackOverflow question.