javascript - 如何将从 API 接收到的 HTML 类注入(inject)到 React 中？

Question

我正在开发一个大型 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>
}

Answer 1

您可以使用 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>
}