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

Question

在React中，我希望能够在使用模板文字定义的变量字符串中使用样式词汇。 为此，我使用元素来对该单词进行样式设置。 但是我遇到了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）。

- Bijoy valappil

Answer 1

你可以使用JSX元素来生成HTML，而不是使用模板字符串，就像通常放置在文本元素旁边一样。例如：

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

我正在使用一个Fragment来包装文本和元素，但如果您想要样式化包装器，可以使用其他东西，如div。

- Raicuparta

---

太好了。工作正常！ - Mahmud hasan

Answer 2

你不能像那样在模板字面量中使用React，因为React组件是一个对象。使用模板字面量将导致[object Object]。所以我建议使用其他方式，例如@richardo提供的解决方案。

- kunquan

Answer 3

如果您可以接受没有像您定义的对象那样简单化，那么这个问题就很简单了。

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

- ravibagul91