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