在JavaScript字符串中添加HTML标签

Question

在JavaScript字符串中添加HTML标签

4

我在 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”这个单词？

- Boky

你应该使用危险的设置innerHTML属性，就像这里提出的建议一样：https://facebook.github.io/react/tips/dangerously-set-inner-html.html - Icepickle

我尝试使用loginTitle: {__html: '您已经<b>拥有</b>账户了吗？'}，但是问题依旧。 - Boky

你也将它作为 dangerouslySetInnerHTML 属性传递给了 div 元素吗？例如 <div dangerouslySetInnerHTML={EN.homePage.loginTitle} />。 - Richard Rutsche

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Brad Colthurst · Accepted Answer

如评论中所提到的一种选项是使用dangerouslySetInnerHTML，将loginTitle赋值为一个__html对象（注意双下划线“__”），并将其作为属性传递给元素。

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>

这里还有一个演示，以说明这两种方法具有相同的效果。