Как отобразить предложение, содержащее HTML, с помощью React?

Я строю с помощью реакции и хочу отображать данные JSON, возвращенные из запроса на получение пользователю. Данные JSON содержат строковые значения, состоящие из предложений с html, появляющимся внутри предложений. Например:

[{ "sentence" : "Don't look at the <span> sun </span> directly with your <span>eye</span>s, it's <span>risk</span>y!"}]

Моя цель состоит в том, чтобы текст отображался нормально, но html в строке отображался как html рядом с текстом, что позволяло мне манипулировать html, чтобы я мог делать такие вещи, как выделение определенных слов в предложении с помощью CSS. В настоящее время я просто получаю данные из запроса на получение, сохраняю их в состояние и отображаю через реквизит, как обычно.

return (
    <div>{props.data.sentence}</div>
);

Однако, если я возьму это значение из своих реквизитов и просто попытаюсь включить его непосредственно в представление, оно просто отобразит все это в виде строки, показывая пользователю фактический HTML-код.

Может кто-нибудь сказать мне, как отобразить такую ​​комбинацию строк + html в React?


person DC3314    schedule 14.11.2020    source источник
comment
Пожалуйста, прочитайте о XSS и XSS на основе DOM, прежде чем делать это. И вы также можете взглянуть на DOMPurify.   -  person Andreas    schedule 14.11.2020


Ответы (1)


Используйте dangerouslySetInnerHTML.

<div dangerouslySetInnerHTML={{ __html: props.data.sentence}}></div>
person wangdev87    schedule 14.11.2020
comment
К вашему сведению, данные в вашем вопросе - это массив, поэтому вам может потребоваться указать data[0].sentence - person wangdev87; 14.11.2020