如何通过props变量向React组件返回的JSX添加自定义CSS类

问题根因 #

你遇到的报错和不符合预期的输出是两个核心问题导致的：

• 你使用class作为prop名，class是JavaScript的保留关键字，不能直接用作变量名，解构时会出现语法问题
• JSX属性的动态值语法使用错误：你尝试的三种写法都不符合JSX传动态值的规则：
  • className="ion-float-left" + {class}：属性值的引号和外部大括号混用，属于语法错误，编译无法通过
  • className="ion-float-left {class}"：引号内部的大括号会被识别为普通文本，不会解析为变量，会直接输出{class}到最终HTML
  • className="ion-float-left class"：直接把class当做字符串常量处理，不会读取对应prop的值

最优实现方案 #

这里提供两种方案，按需选择即可：

方案1：保留原有class prop名 #

如果需要兼容现有调用逻辑不修改prop名，可以在解构时将class重命名为合法变量名后拼接使用，推荐用数组过滤空值的方式拼接类名，避免传入空类名时出现多余空格：

interface ContainerProps {
    position?: string;
    content?: string;
    class?: string;
}

const CardContainer: React.FC<ContainerProps> = ({ 
  position = "right", 
  content = "n/a", 
  // 解构时重命名保留字class为自定义变量名customClass
  class: customClass = "" 
}) => {
    const positionLower = position.trim().toLowerCase();
    if (positionLower === "right") {
        return <>
          <div className={["ion-float-right", customClass].filter(Boolean).join(' ')}>
            {content}
          </div>
          <div className="clear-right"></div>
        </>
    } else if (positionLower === "left") {
        // 也可以用模板字符串实现拼接，写法更简洁
        return <div className={`ion-float-left ${customClass}`}>{content}</div> 
    }
    return null;
};

export default CardContainer;

方案2：修改prop名为符合React规范的className（更推荐） #

React生态中默认用className表示传入的自定义类名，修改后代码可读性更高，也不会出现保留字冲突问题：

interface ContainerProps {
    position?: string;
    content?: string;
    // 替换为符合React惯例的prop名
    className?: string;
}

const CardContainer: React.FC<ContainerProps> = ({ 
  position = "right", 
  content = "n/a", 
  className = "" 
}) => {
    const positionLower = position.trim().toLowerCase();
    if (positionLower === "right") {
        return <>
          <div className={["ion-float-right", className].filter(Boolean).join(' ')}>
            {content}
          </div>
          <div className="clear-right"></div>
        </>
    } else if (positionLower === "left") {
        return <div className={`ion-float-left ${className}`}>{content}</div> 
    }
    return null;
};

export default CardContainer;

两种方案都可以实现你期望的最终效果：当传入自定义类名时，会自动拼接到对应元素的类名列表中。

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