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

Question

我在使用 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} />
  )
}

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

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

Answer 1

看起来你错过了语法。它在 React 元素中也不起作用。在里面渲染

使用 dangerouslySetInnerHTML 的正确语法是

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