如何在React组件中用props构建SVG图标按钮的元素变量？

你的代码存在两个核心问题：

1. React中JSX元素不能和字符串直接用+拼接，需要用数组或React Fragment组合元素
2. SVG的xlink:href属性在React中要写成驼峰式的xlinkHref，且动态属性值必须用大括号{}包裹，不能用字符串拼接

下面是修正后的完整组件代码：

export const Button = ({ type, size, iconString, label, ...props }) => {
  let buttonContent;
  
  if (iconString && label) {
    // 用React Fragment组合SVG和文本，结构更清晰
    buttonContent = (
      <>
        <svg className="btn-icon">
          <use xlinkHref={`/svgs/icons.svg#${iconString}`} />
        </svg>
        {label}
      </>
    );
  } else {
    buttonContent = label;
  }

  return (
    <button
      type="button"
      className={`btn btn-${size} btn-${type}`}
      {...props}
    >
      {buttonContent}
    </button>
  );
};

关键修改说明： #

• 组件名改为Button，符合React组件首字母大写的规范（小写会被解析为原生DOM标签）
• 用<>（React Fragment）替代字符串拼接，正确组合SVG元素和label文本
• 动态绑定xlinkHref时，用模板字符串${}插入iconString变量，并用大括号{}包裹整个属性值
• 简化className拼接逻辑，用模板字符串替代数组join写法，代码更简洁

另外补充：如果你的项目支持较新的SVG标准，也可以直接用href替代xlinkHref，写法为<use href={/svgs/icons.svg#${iconString}} />，功能完全一致。

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