本文详解如何在 React 函数组件中基于 props 动态创建并组合 JSX 元素（如 + ），重点解决属性拼接、命名规范、Fragment 使用及 xlinkHref 正确写法等常见陷阱。
本文详解如何在 react 函数组件中基于 props 动态创建并组合 jsx 元素（如 `svg>` + `
在 React 开发中，常需根据传入的 props（例如图标标识符 iconString 和文本 label）动态构造复合内容。一个典型场景是：为按钮组件按需插入 SVG 图标精灵（sprite）中的指定图标，并与文字并排显示。但直接用字符串拼接 JSX（如 "
正确做法是完全使用 JSX 语法表达结构，通过花括号 {} 注入动态值，并严格遵循 React 的属性命名规则。以下是优化后的完整实现：
export const Button = ({ type, size, iconString, label, ...props }) => {
let buttonContent = label; // 默认仅渲染 label
if (iconString && label) {
buttonContent = (
<>
<svg className="btn-icon" aria-hidden="true">
<use xlinkHref={`/svgs/icons.svg#${iconString}`} />
</svg>
{label}
</>
);
} else if (iconString) {
// 仅图标无文字时的兜底支持（可选）
buttonContent = (
<svg className="btn-icon" aria-hidden="true">
<use xlinkHref={`/svgs/icons.svg#${iconString}`} />
</svg>
);
}
return (
<button
type="button"
className={['btn', `btn-${size}`, `btn-${type}`].join(' ')}
{...props}
>
{buttonContent}
</button>
);
};✅ 关键要点说明：
- JSX Fragment（...>）不可省略：当需返回多个同级元素（如
- xlinkHref 而非 xlink:href：React 中所有 HTML 属性均采用 camelCase 命名，xlink:href 应写作 xlinkHref，这是 React 的强制规范；
- 模板字符串插值安全：{/svgs/icons.svg#${iconString}} 使用反引号或普通双引号内嵌 ${} 即可，无需额外转义；
- 语义与可访问性：添加 aria-hidden="true" 明确告知屏幕阅读器该图标仅为装饰，避免冗余播报；
- 组件命名规范：首字母大写（Button）符合 React 组件约定，确保 JSX 解析器正确识别为自定义组件而非 HTML 标签。
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 确保 /svgs/icons.svg 文件路径正确且服务器已配置 MIME 类型 image/svg+xml；
- iconString 值必须严格匹配 SVG sprite 文件中
的 id，大小写与连字符需完全一致； - 若 label 为 React 节点（如含 的富文本），上述写法仍兼容；但若需更灵活的内容组合（如图标位置可配置），建议升级为 children + iconPosition 等扩展 props。
掌握这种“条件式 JSX 构建”模式，是编写高复用、强类型 UI 组件的基础能力——它让逻辑清晰、结构可控，且天然契合 React 的声明式哲学。
