React - 嵌入 HTML 标签的 ES6 模板字符串答案

【问题标题】：React - ES6 template strings with HTML tags embeddedReact - 嵌入 HTML 标签的 ES6 模板字符串
【发布时间】：2017-11-24 12:33:33
【问题描述】：

如何在 ES6 模板字符串中使用 HTML 标记？以下：

{ this.props.rule.conditions.map(e => `<li>${ e.booleanOperator } / ${ e.column }</li>`) }

只输出纯文本：

<li>Blah / Blah</li><li>Blah / Blah</li><li>Blah / Blah</li>

而不是实际格式化的 HTML 列表。它将像循环一样使用。

【问题讨论】：

【解决方案1】：

如果您使用普通的 Javascript 和 .innerHTML 来设置文本，那么您的模板字符串用法是完全正确的。

但是，在 React 中，它被转换为普通字符串（去除 HTML 字符）。这是为了防止very prevalent form of website hacking, XSS。

继续，完全删除“`”和“$”。

<ul>
    { this.props.rule.conditions.map(e => 
        <li>{ e.booleanOperator } / { e.column }</li>
    ) }
</ul>

现在它看起来就像你在其他地方使用的 React。这是使用 React 真正甜蜜的部分：您可以像那样跳入和跳出元素、循环和函数！并且 react 会将其全部转换为实际的 HTML 元素。

【讨论】：

【解决方案2】：

您不需要为此使用模板字符串。你可以达到同样的效果：

getMarkup = (e)=> {
 return (
  <li>
     {e.boolenaOperator}{e.column}
  </li>
 )
}
{ this.props.rule.conditions.map(e => {this.getMarkup(e)} }

【讨论】：

【解决方案3】：

只需将您的表达式放在一个 ${} 占位符中即可对其进行评估。

例子：

{ this.props.rule.conditions.map(e => `<li>${ e.booleanOperator / e.column }</li>`) }

希望对你有帮助

【讨论】：

为什么这里需要字符串文字？
假设这是一个算术运算...文字用于避免与 + 运算符连接...
简单地没有``：this.props.rule.conditions.map(e => <li>{e.booleanOperator / e.column }</li>) }