reactjs - 如何渲染变量(或 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>
  )
}