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

Question

如何在 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 列表。它将像循环一样使用。

Answer 1

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

但是，在 React 中它会转换为普通字符串(删除 HTML 字符)。这是为了防止 very prevalent form of website hacking, XSS .

在这种情况下，您可以继续使用 React 元素。

继续，只需完全删除“`”和“$”即可。

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

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