Вывести статью из бэкэнда и оформить ее с помощью html - PullRequest
Новая
       4

Вывести статью из бэкэнда и оформить ее с помощью html

0 голосов
/ 19 января 2020

У меня есть бэкэнд, который возвращает мне весь основной текст статьи как String. На моем веб-сайте я хочу создать каждую статью в другом стиле HTML / CSS, например, иметь тег <br>, чтобы разбить статью, если она слишком длинная. Но некоторые статьи не будут длинными, поэтому я не могу поместить тег <br> в свой компонент внешнего интерфейса.

Поскольку мой компонент веб-интерфейса не изменяется в зависимости от размера этого текста, я предложил сохранить теги <br> непосредственно внутри текстов статей String. Но данные поступают в виде строки с тегами <br>, теги обрабатываются также как строки, поэтому это не влияет на стилизацию.

Должен ли я как-то экранировать эти теги из строки? Или есть лучший способ сделать это? Я понятия не имею, как это должно быть сделано правильно.

Ответы [ 2 ]

1 голос
/ 19 января 2020

Если вы получаете необработанный html контент, в котором уже есть теги разметки, которые вы хотите визуализировать в ReactJS, то вам нужно использовать атрибут React dangerouslySetInnerHTML. В зависимости от того, где вы держите разметку, которую вы получили от бэкэнда, ваш код где-то внутри вашей функции Render будет выглядеть примерно так: 

<div dangerouslySetInnerHTML={this.state.recievedArticleRawText} />

см. Официальную документацию здесь для предостережений и предупреждений об использовании: https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

По сути, команда React целенаправленно решила назвать это dangerously, потому что вы должны использовать его, только если вы полностью доверяете значению, которое вы устанавливаете. Никогда не устанавливайте значения, введенные пользователем для этого атрибута, поскольку он оставляет отверстия для всех видов инъекций.

0 голосов
/ 19 января 2020

Если вы используете innerHTML, тогда он должен работать правильно - учитывая, что вы не используете < br >, поскольку это недопустимая сущность HTML (<br /> и <br>)). 

const text1 = '1. This is a line< br >This should be the next line.'
const text2 = '2. This is a line<br>This should be the next line.'
const text3 = '3. This is a line<br />This should be the next line.'

document.getElementById('text1').innerHTML = text1 // expected to not work correctly
document.getElementById('text2').innerHTML = text2 // expected to work correctly
document.getElementById('text3').innerHTML = text3 // expected to work correctly
<span id="text1"></span>
<hr />
<span id="text2"></span>
<hr />
<span id="text3"></span>
...