JSX中SVG属性的正确语法：React SVG组件填充色传递问题

嘿，这问题很常见，我来给你捋清楚正确的写法！

首先，你遇到的核心问题是JSX中如何把props值绑定到SVG的属性上——记住，在JSX里要插入JavaScript变量/表达式，必须用大括号{}包裹，而不是直接写字符串。

类组件写法（对应你提到的this.props） #

如果你用的是类组件，直接把this.props.fillColour放到SVG的fill属性的大括号里就行，示例代码如下：

import React from 'react';

class Icon extends React.Component {
  render() {
    return (
      {/* 关键：用{this.props.fillColour}绑定fill属性 */}
      <svg width="24" height="24" viewBox="0 0 24 24" fill={this.props.fillColour}>
        {/* 这里放你的SVG路径等内容，注意要移除内部元素的硬编码fill属性！ */}
        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z" />
      </svg>
    );
  }
}

// 可选：设置默认填充色，防止没传props时显示异常
Icon.defaultProps = {
  fillColour: "#000"
};

export default Icon;

函数组件写法（现在更推荐的方式） #

如果是用函数式组件，写法会更简洁，直接解构props就行：

import React from 'react';

// 解构props并设置默认值
function Icon({ fillColour = "#000" }) {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill={fillColour}>
      {/* SVG内容 */}
      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z" />
    </svg>
  );
}

export default Icon;

重要注意事项 #

• 如果你的SVG内部的<path>或其他元素本身写了fill="#xxx"这种硬编码值，它会覆盖SVG标签上的fill属性！所以一定要把内部元素的fill属性删掉，或者改成fill="inherit"让它继承父元素的颜色。
• 调用组件的时候，你原来的写法<Icon fillColour="#ff5e3a"/>是没问题的，props的命名用驼峰式很规范。

这样写之后，你的Icon组件就能正确接收并应用传入的填充色啦！

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