Как внедрить HTML с классами, полученными из API, в React?
Я работаю над большим проектом React, где мы получаем данные из API, который мы не контролируем. Иногда нам нужно получить строку HTML со встроенными стилями и вставить все это непосредственно в наш компонент. Он будет передан нам в виде строки — я не получил четкого ответа от команды бэкенда, но я думаю, что это будет что-то вроде
<textarea rows='1' cols'50' >Some text with <span class='special style'>special styles applied</span></textarea>
Как мне правильно (и безопасно) вставить это в мой реагирующий компонент? Просто что-то вроде следующего?
const myHTMLStringFromAPI = getApiStuff()
render(){
return <div>{myHTMLStringFromAPI}</div>
}
Возможный дубликат Вставка HTML с операторами переменных React (JSX)
Кажется, это дубликат. Мне просто закрыть вопрос?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Что вы можете делать, используя dangerouslySetInnerHTML
dangerouslySetInnerHTML is React’s replacement for using innerHTML in the browser DOM. This is used because setting
innerHTMLdirectly is risky.
const myHTMLStringFromAPI = getApiStuff()
render(){
return <div dangerouslySetInnerHTML = {{__html:`<textarea rows='1' cols'50' >Some text with <span class='special style'>special styles applied</span></textarea>`}}>{myHTMLStringFromAPI}</div>
}
Возможный дубликат: stackoverflow.com/questions/23616226/…