у меня размах -
<span> {textToRender} </span>
Я отображаю html-текст (в виде строки) с диапазоном.
some text <br/> some text <br/> some text <ol>text
Это отображается как текст только в javascript. Html-теги не применяются поверх него.
<span> {textToRender} </span>
Отвечает ли это на ваш вопрос? Как отобразить HTML-строку как настоящий HTML?
Это ожидаемо, поскольку React.js
автоматически избегает экстраполяций для предотвращения инъекций и других уязвимостей. Если вы хотите, чтобы HTML анализировался и применялись правильные теги, вы можете использовать JSX вместо String
или явно указать HTML следующим образом:
<span dangerouslySetInnerHTML = {{ __html: textToRender }} />
Или
конвертируйте свой textToRender
в JSX.
textToRender = <>some text <br/> some text <br/> some text</>
<div dangerouslySetInnerHTML = {{_html:textToRender}}/>
Объясните в своем ответе, почему это решает проблему?
так же, как ребята предлагают, вы можете использовать опасно SetInnerHTML, Несмотря на то, что название предполагает опасность вопасноSetInnerHTML и его использовании, принятие необходимых мер с использованием хорошо разработанного дезинфицирующего средства гарантирует, что код будет чистым и не будет запускать неожиданные сценарии при отображении в узле React. вы можете использовать DOMPurify, например
import DOMPurify from 'dompurify'
const App = () => {
const data = `lorem <b onmouseover = "alert('mouseover');">ipsum</b>`
const sanitizedData = () => ({
__html: DOMPurify.sanitize(data)
})
return (
<div
dangerouslySetInnerHTML = {sanitizedData()}
/>
);
}
export default App;
Хороший. Использование DOMPurify
намного лучше, чем просто опасная настройка HTML.
Пожалуйста, попробуйте это следующим образом:
<span dangerouslySetInnerHTML = {{__html:textToRender}}></span>
Я надеюсь, что это поможет вам.
Я бы начал с поиска «html-строки рендеринга реакции».