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

【问题标题】：How to insert HTML inside template literal strings?如何在模板文字字符串中插入 HTML？
【发布时间】：2019-06-21 17:15:02
【问题描述】：

在 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) 需要设置样式。

【问题讨论】：

标签： html reactjs template-literals

【解决方案1】：

除了模板字符串之外，您还可以像往常一样使用 JSX 元素生成 HTML，放置在文本元素旁边。示例：

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

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

【讨论】：

太棒了。工作！

【解决方案2】：

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

【讨论】：

【解决方案3】：

您可以将其变得如此简单，如果您可以不使用您定义的对象

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

【讨论】：