如何在模板文字字符串中插入 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 之类的其他东西。

Answer 2

你不能像那样在 template-literal 中使用 React，因为 React 组件是一个对象。将它与 template-literal 一起使用将导致 this[object Object] 。所以我建议使用其他方式，例如@richardo

的解决方案

Answer 3

你可以把它变得这么简单，如果你可以没有你定义的对象

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

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

How to insert HTML inside template literal strings?

html

reactjs

template-literals