如何渲染变量（或prop）内的jsx / html？

Question

const Footer = () => {
  let a="<b>Hey</b>"
  return (
    <div>
      Some bold text: {a}
    </div>
  )
}

这只会呈现为Some bold text: <b>Hey</b>。如何将粗体文本呈现为粗体？变量内容是我自己的，所以我不必担心eval的东西。

Answer 1

您必须使用dangerouslySetInnerHTML

const Footer = () => {
  let a= { __html: "<b>Hey</b>" };
  return (
    <div>
      Some bold text: <span dangerouslySetInnerHTML={a} />
    </div>
  )
}