React中如何将包含<span>的字符串作为组件Props传递？

你现在直接传递包含<span>标签的字符串，React会自动转义HTML内容，导致标签直接显示成文本，没法应用Tailwind样式。以下是几种不用数组的实现方式：

方法1：使用dangerouslySetInnerHTML（不推荐用于不可信内容） #

直接让React解析字符串中的HTML标签，组件内部修改为：

{description && (
  <p className="text-sm text-text" dangerouslySetInnerHTML={{ __html: description }} />
)}

⚠️ 注意：这个方法会直接渲染HTML，如果description来自用户输入或其他不可信来源，可能引发XSS攻击，谨慎使用。

方法2：传递JSX元素（推荐） #

调用组件时直接传入JSX而非字符串，这样React能正常解析标签：

<Home 
  description={
    <>
      How can I <span className="text-highlight">highlight</span> 
      parts of <span className="text-highlight">this</span> string?
    </>
  } 
/>

组件内部保持原渲染逻辑即可：

{description && (
  <p className="text-sm text-text">
    {description}
  </p>
)}

这种方式安全可靠，是React推荐的处理富文本内容的方式。

方法3：自定义标记转换函数（适合外部文本场景） #

如果文本来自后端或其他外部来源，不想使用dangerouslySetInnerHTML，可以约定特殊标记（比如[]）来标记高亮部分，再通过函数转换为JSX：
调用组件：

<Home description="How can I [highlight] parts of [this] string?" />

组件内部添加处理函数并渲染：

const renderDescription = (text) => {
  return text.split(/\[([^\]]+)\]/).map((part, index) => {
    if (index % 2 === 1) {
      return <span key={index} className="text-highlight">{part}</span>;
    }
    return part;
  });
};

{description && (
  <p className="text-sm text-text">
    {renderDescription(description)}
  </p>
)}

这种方式既不用传数组，也避免了安全风险，灵活度高。

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