React/JS字符串中能否输出HTML标签？新手技术咨询

没问题！刚接触React和原生JS的话，确实会碰到这个小困惑——默认情况下直接输出带HTML标签的字符串，标签会被转义成纯文本，没法生效。我帮你分两种情况讲清楚怎么解决：

一、React 中的处理方式 #

React为了安全，默认会转义所有HTML内容，所以直接把带<strong>的字符串放进JSX里，只会显示成Some sample text with a <strong>HTML tag</strong>这样的纯文本。要让标签生效，得用**dangerouslySetInnerHTML**属性（名字听起来吓人，其实就是提醒你要警惕XSS风险，比如不要直接渲染用户输入的未过滤内容）。

结合你给出的代码，修改后的写法大概是这样：

renderArtistFeatures() {
  const createFeatures = [
    {
      feature: 'free',
      Icon: FreeIcon,
      title: 'Main title',
      copy: 'Some sample text with a <strong>HTML tag</strong>'
    }
  ].map(({ feature, Icon, title, copy }, i) => {
    const klass = `create-feature create-feature--${feature} column...`;
    return (
      <div key={i} className={klass}>
        <Icon />
        <h3>{title}</h3>
        {/* 这里用dangerouslySetInnerHTML渲染带HTML的copy */}
        <div dangerouslySetInnerHTML={{ __html: copy }} />
      </div>
    );
  });

  return <div className="create-features">{createFeatures}</div>;
}

另外如果你的文本不是从外部接口获取的，而是自己手写的，更推荐直接用JSX语法，既安全又清晰：

// 直接用JSX拼接内容
const copy = (
  <>Some sample text with a <strong>HTML tag</strong></>
)
// 然后直接在JSX里渲染：{copy}

二、原生JS 中的处理方式 #

原生JS里要让字符串中的HTML标签生效，直接用DOM元素的**innerHTML**属性就行，比如：

// 假设页面上有个id为"content"的元素
const contentEl = document.getElementById('content');
contentEl.innerHTML = 'Some sample text with a <strong>HTML tag</strong>';

同样要注意：如果innerHTML的内容来自用户输入或不可信来源，一定要做XSS过滤，避免安全问题。

内容的提问来源于stack exchange，提问作者Dean Elliott