在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分配loginTitle一個__html對象（注意雙下划線'__'）並將其作為道具傳遞給元素。

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

一般來說，盡管您應該避免文檔中強調的那樣，盡可能避免使用dangerouslySetInnerHTML的SetInnerHTML： 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 ，只是為了說明兩種方法具有相同的效果。