javascript - 在javascript字符串中添加html标签

Question

我在 react js 中有以下代码:

'use strict';

module.exports = {
    homePage: {
        sliderTitle: 'Creative portfolio',

        loginTitle: 'Do you already <b>have</b> an account?'

    },
    registrationPage: {
        foo: 'bar'
    }
};

当我尝试使用我拥有的那些标签时

var EN = require('./en');
{EN.homePage.loginTitle}

但是 {EN.homePage.loginTitle} 返回里面有 b 标签的字符串。

如何将这个 b 标签应用到 have 这个词上？

Answer 1

评论中提到的一个选项是使用 dangerouslySetInnerHTML 为 loginTitle 分配一个 __html 对象(注意双下划线“__”)和将它作为 Prop 传递给元素。

loginTitle: {__html: 'Do you already <b> have </b> an account?' }
...
<div dangerouslySetInnerHTML={EN.homePage.loginTitle}></div>

一般来说，您应该尽可能避免使用 dangerouslySetInnerHTML，正如文档中所强调的那样:https://facebook.github.io/react/tips/dangerously-set-inner-html.html

还有其他更安全的选项可以在此处概述的文本中插入 HTML:http://facebook.github.io/react/docs/jsx-gotchas.html

在这种情况下，一个适合你的方法是使用字符串和 JSX 的混合数组，所以:

loginTitle: ['Do you already ', <b>have</b>, ' an account']
...
<p>{EN.homePage.loginTitle}</p>

这是一个 DEMO也只是为了说明这两种方法具有相同的效果。