html - 如何在模板文字字符串中插入 HTML？

Question

在 React 中，我希望能够在使用模板文字在变量中定义的字符串中使用样式词。为此，我正在使用 a 来为该词设置样式。我收到 HTMLIntrinsic 使用错误。

注意 - SO 中针对与此相关的问题给出的解决方案并不能解决我遇到的问题。请检查代码。

如何规避这个问题

尝试使用 dangerouslyinsertHTML，但不是推荐的解决方案。

    //Actual code
    const temperature = "22";
    const list = {
       item: `The temperature is ${temperature}`
    }

    //To style it-
    const temperature = "22";
    const list = {
       item: `The temperature is <span style={{color:'red'}}>${temperature}</span>`
    }

    //And the above list.item is inserted inside JSX like -
    return (
      <div>{list.item}</div>
    )

温度(22) 需要设置样式。

Answer 1

您可以像往常一样使用 JSX 元素生成 HTML，而不是模板字符串，放置在您的文本元素旁边。示例:

item: (
  <>
    The temperature is
    <span style={{color:'red'}}>
      {temperature}
    </span>
  </>
)

我正在使用 Fragment将文本和元素包装在一起，但如果您也想设置包装器的样式，可以使用其他东西，例如 div。