React中，className属性自定义组件不生效的问题

在React中，className属性不仅适用于原生的HTML元素，也可以用于自定义组件。实际上，className属性是React中通用的属性，可以应用于任何React元素，无论是原生的HTML元素还是自定义的组件。

为什么使用className而不是class?

在JavaScript中，class是一个保留关键字，用于定义类。为了避免与JavaScript的关键字冲突，React使用className作为类名的属性名。因此，在React中，你应该总是使用className而不是class来设置类名。

如何在自定义组件中使用className?

在自定义组件中使用className属性的方法与在原生HTML元素中使用相同。你可以在自定义组件的属性中包含className，然后在组件内部使用它。

示例

下面是一个使用className的自定义组件示例：

import React from 'react';

interface CustomComponentProps extends React.HTMLAttributes<HTMLDivElement> {
  customProp?: string;
}

const CustomComponent: React.FC<CustomComponentProps> = (props) => {
  return (
    <div {...props}>
      Hello World
    </div>
  );
};

const App: React.FC = () => {
  return (
    <CustomComponent className="my-custom-class" customProp="value">
      Content
    </CustomComponent>
  );
};

export default App;

 

在这个例子中，CustomComponent组件接受所有HTMLAttributes<HTMLDivElement>，其中包括className属性。当使用CustomComponent时，你可以像使用原生HTML元素一样传递className属性。

注意事项

• 确保自定义组件的类型声明中包含了className属性。
• 如果你遇到了类型错误，确保你正确地指定了组件的类型。
• 如果你需要在自定义组件内部使用类名，确保你正确地从属性中提取了className属性。