JavaScript中为r.title包裹<b>标签后显示为纯文本的问题咨询

嘿，我懂你遇到的问题了——直接拼接HTML字符串在React里确实不会被解析，因为React为了安全默认会转义所有文本内容。咱们来一步步解决它：

为什么你的代码不行？ #

你之前尝试用字符串拼接生成带<b>标签的内容，然后直接传给<span>的子元素：

r.subtitle && (l = "<b>" + r.title + "</b>" + r.subtitle)

React会把<b>当成普通文本输出，而不是解析成HTML标签，这是React内置的XSS防护机制。

方法1：用React元素组合（推荐，无XSS风险） #

不要用字符串拼接，而是用React的元素来构建内容，这样既安全又能正确解析标签。修改你的组件代码如下：

function (e, t, n) { "use strict"; function r(e) { return e && e.__esModule ? e : { default: e }; } Object.defineProperty(t, "__esModule", { value: !0 }); var o = n(0), a = r(o), i = n(1), l = r(i), u = function (e) { var t = e.className, n = e.style, r = e.track, o = e.trackNo, i = e.displayArtistNames; 
// 构建内容元素数组
const content = [];
// 添加 trackNo（如果存在）
if (null != o) {
  content.push(`${o}. `);
}
// 添加加粗的title
content.push(a.default.createElement("b", null, r.title));
// 添加subtitle（如果需要显示）
if (i && r.subtitle) {
  content.push(` - ${r.subtitle}`);
}
// 返回渲染的span
return a.default.createElement("span", { style: n, className: t }, content); 
}; (u.propTypes = { track: l.default.object.isRequired, trackNo: l.default.number, style: l.default.object, className: l.default.string, displayArtistNames: l.default.bool }), (t.default = u);

核心改动是：

• 用数组content来组合不同的内容片段，其中r.title被包裹在React的<b>元素里
• 把这个数组作为<span>的子元素，React会正确渲染每个元素和文本节点

方法2：使用dangerouslySetInnerHTML（仅当内容完全可信时使用） #

如果你必须用字符串拼接的方式，可以用React的dangerouslySetInnerHTML属性强制解析HTML。但注意：这个方法有XSS风险，只有当你能确保r.title和r.subtitle的内容是完全安全的（比如来自可信的后端，没有用户输入的恶意代码）才能使用。

修改后的代码示例：

function (e, t, n) { "use strict"; function r(e) { return e && e.__esModule ? e : { default: e }; } Object.defineProperty(t, "__esModule", { value: !0 }); var o = n(0), a = r(o), i = n(1), l = r(i), u = function (e) { var t = e.className, n = e.style, r = e.track, o = e.trackNo, i = e.displayArtistNames, l = `<b>${r.title}</b>`; 
if (i && r.subtitle) {
  l += ` - ${r.subtitle}`;
}
if (null != o) {
  l = `${o}. ${l}`;
}
// 使用dangerouslySetInnerHTML解析HTML
return a.default.createElement("span", { style: n, className: t, dangerouslySetInnerHTML: { __html: l } }); 
}; (u.propTypes = { track: l.default.object.isRequired, trackNo: l.default.number, style: l.default.object, className: l.default.string, displayArtistNames: l.default.bool }), (t.default = u);

这个方法通过dangerouslySetInnerHTML: { __html: l }告诉React直接解析字符串里的HTML内容，但一定要谨慎使用。

内容的提问来源于stack exchange，提问作者Vasili Simanau