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标记应用于单词has？

Answer 1

评论中提到的一个选项是使用dangerouslySetInnerHTML分配loginTitle一个__html对象（请注意双下划线＆＃39; __＆＃39;）并将其传递给元素作为道具。

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

在这种情况下应该适合你的一个是使用混合数组的字符串＆amp; JSX，所以：

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

此处还有一个DEMO，只是为了说明两种方法都有相同的效果。

在javascript字符串中添加html标记

1 个答案: