Question

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

注意-SO中与此相关的问题的解决方案无法解决我遇到的问题。请检查代码。

如何解决这个问题

尝试使用危险插入HTML，但不推荐使用解决方案。

    //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

您不能在模板语言中使用React，因为React组件是一个对象。将其与template-literal一起使用将产生this [object Object]。所以我建议使用其他方式，例如@richardo

的解决方案

Answer 3

您可以这样简单，如果您没有定义的对象就可以了

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

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

3 个答案: