React как вставить html

Rendering the HTML string in React

In this tutorial, we are going to learn about how to render the html string as real dom elements in React app.

If we try to use JSX curly brace syntax < >to render an html string, react will treated it as a plain text (to prevent from the cross-site scripting attacks).

import React from "react"; export default function App()   const htmlString = "
Hello World
"; return div>htmlString>/div>; >

To render the html string in react, we can use the dangerouslySetInnerHTML attribute which is a react version of dom innerHTML property.

import React from "react"; export default function App()   const htmlString = "
Hello World
"; return div dangerouslySetInnerHTML= __html: htmlString >>> /div>; >

The term dangerously is used here to notify you that it will be vulnerable to cross-site scripting attacks (XSS).

Similarly, you can also use the html-react-parser library to render the html string.

import React from "react"; import parse from "html-react-parser"; export default function App()  const htmlString = "
Hello World
"; return div>parse(htmlString)>/div>;>

Источник

Вставка HTML с помощью переменных React в JSX

Часто при создании веб-приложений с использованием React возникает ситуация, когда необходимо вставить HTML-код внутрь JSX с помощью переменной. Например, у вас есть переменная, содержащая строку с HTML-разметкой, и вы хотите вставить эту разметку внутрь компонента React.

var htmlString = «

Это мой HTML код с жирным текстом

»;

Однако, если вы так сделаете, то в результате внутри элемента div будет отображаться строка текста, а не HTML-разметка. Это связано с тем, что React по умолчанию экранирует все строки, чтобы предотвратить атаки с использованием вредоносного кода (такие атаки называются XSS — Cross-Site Scripting).

Для того, чтобы вставить HTML-разметку из строки, вам потребуется использовать специальный атрибут dangerouslySetInnerHTML . Этот атрибут позволяет вставить HTML-разметку прямо внутрь элемента.

В данном примере, HTML-разметка из строки htmlString будет вставлена внутрь элемента div.

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

Источник

How to render HTML in React

I had this problem — I needed to add an HTML string in a React application, coming from a WYSIWYG editor, but simply adding to the JSX was escaping the HTML.. so the HTML tags were displayed to the user!

How did I solve it? I saw 2 solutions, basically. The first native, the second required a library.

First solution: use dangerouslySetInnerHTML

You can use the dangerouslySetInnerHTML attribute on an HTML element to add an HTML string inside its content:

div dangerouslySetInnerHTML=  __html: props.house.description  >>>div>

Remember that it’s called dangerously for a reason. HTML is not escaped at all in this case, and it might cause XSS issues.

But there are good use cases for this.

Second solution: use a 3rd party library

There are many libraries that implement the functionality that dangerouslySetInnerHTML provides, in a simpler way.

One of them is the react-html-parser library.

Warning: at the time of writing, it’s not been updated in the last 2 years, so things might break in the future. It worked for me.

Which one to use?

You can look for other similar libraries, but in the end I chose to use the dangerouslySetInnerHTML way.

This dangerously-looking name was a built-in reminder to pay attention at correctly whitelisting the HTML tags I allowed the user to enter to that HTML string.

Источник

Вставка HTML с помощью переменных React в JSX

Часто при создании веб-приложений с использованием React возникает ситуация, когда необходимо вставить HTML-код внутрь JSX с помощью переменной. Например, у вас есть переменная, содержащая строку с HTML-разметкой, и вы хотите вставить эту разметку внутрь компонента React.

var htmlString = «

Это мой HTML код с жирным текстом

»;

Однако, если вы так сделаете, то в результате внутри элемента div будет отображаться строка текста, а не HTML-разметка. Это связано с тем, что React по умолчанию экранирует все строки, чтобы предотвратить атаки с использованием вредоносного кода (такие атаки называются XSS — Cross-Site Scripting).

Для того, чтобы вставить HTML-разметку из строки, вам потребуется использовать специальный атрибут dangerouslySetInnerHTML . Этот атрибут позволяет вставить HTML-разметку прямо внутрь элемента.

В данном примере, HTML-разметка из строки htmlString будет вставлена внутрь элемента div.

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

Источник