Reactjs 自定义元素按字符串渲染

如何解决Reactjs 自定义元素按字符串渲染

我在使用 React.js 时遇到一个问题

我从后端得到了一些字符串我需要在我的 react jsx DOM 中输入它们

后端给我这些字符串

from Backend => 
let testString = '<TestTag />'

我只想执行 DangerouslyInnerHTML

from Frontend =>

const TestTag = styled.div`
width: 100px;
height: 100px;
background-color: yellow;
`

function Example() {

  const html = `
    testString
  `
  return (
    <InnerHTML html={html} />
  )
}

预期显示黄色框，但是打印空元素

我应该怎么做才能解决这个问题？

解决方法

看起来您遗漏了语法。它也不适用于 React 元素。在里面渲染它

使用危险的SetInnerHTML 的正确语法是

<div dangerouslySetInnerHTML={{ __html: html }} />