我正在开发一个大型 React 项目,我们从我们无法控制的 API 接收数据,有时我们需要接收具有内联样式的 HTML 字符串,并将其全部直接插入到我们的组件中。它将作为字符串传递给我们——我还没有从后端团队得到明确的答案,但我认为它会像
<textarea rows='1' cols'50' >Some text with <span class='special style'>special styles applied</span></textarea>
如何正确(安全)地将其插入到我的 react 组件中?只是像下面这样?
const myHTMLStringFromAPI = getApiStuff()
render(){
return <div>{myHTMLStringFromAPI}</div>
}
最佳答案
您可以使用 dangerouslySetInnerHTML
执行操作
dangerouslySetInnerHTML is React’s replacement for using innerHTML in the browser DOM. This is used because setting
innerHTML
directly 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>
}
关于javascript - 如何将从 API 接收到的 HTML 类注入(inject)到 React 中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54748465/