如何在 React 中将带样式的 JSX 片段作为 prop 传递

在 React 中，不能直接将含 HTML 标签（如 <span>）的字符串作为 prop 传入并安全渲染；正确方式是传递 JSX 元素（如 <>...</> 片段），由组件直接渲染，既安全又灵活，且天然支持 Tailwind 类名。

在 react 中，不能直接将含 html 标签（如 ``）的字符串作为 prop 传入并安全渲染；正确方式是传递 jsx 元素（如 `...>` 片段），由组件直接渲染，既安全又灵活，且天然支持 tailwind 类名。

React 的设计哲学强调类型安全与 XSS 防御：若你尝试将形如 "How can I <span className="text-highlight">highlight</span>..." 的字符串直接传入并用 dangerouslySetInnerHTML 渲染，不仅违背 React 最佳实践，还会绕过 JSX 编译时的类型检查、丢失 Tailwind CSS 类名的自动识别（如 text-highlight 需提前在 tailwind.config.js 中定义或使用 JIT 模式支持），更可能引入跨站脚本风险。

正确做法：将描述内容声明为 JSX 元素（React Node），而非字符串：

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

对应组件内直接渲染（无需额外解析）：

// Home.tsxinterface HomeProps {  description: React.ReactNode; // ✅ 类型明确：接受任意合法 JSX}const Home: React.FC<HomeProps> = ({ description }) => {  return (    <p className="text-sm text-text leading-relaxed">      {description}    </p>  );};

? 小贴士：

1. 使用 React.ReactNode 作为 prop 类型，比 any 或 string 更安全、更具可维护性；
2. 空格需显式写为 {' '}（避免 JSX 自动合并空白），保证排版准确；
3. 若内容来自 CMS 或用户输入，切勿降级为 dangerouslySetInnerHTML —— 应由服务端预处理为结构化数据，或前端使用白名单解析库（如 react-html-parser）+ 严格校验；
4. Tailwind 类名（如 text-highlight）需确保已在配置中定义（例如通过 extend.colors 或自定义插件），否则将被 PurgeCSS 移除。

总结：React 的本质是“用 JavaScript 描述 UI”，因此优先传递 JSX 而非字符串——这不仅是技术选择，更是拥抱框架设计意图、保障可读性、类型安全与样式可控性的关键实践。