Reactjs 除了其他道具之外，React还将其他类名传递给子组件

我希望将其他类名传递到子组件中，并传递任何其他道具

例如：

class Parent extends Component {
    render() {
        <Child
            className="parent-class"
            flavor="chocolate"
        />
    }
}

class Child extends Component {
    render() {
        <div className="child-class" {...props}>

        </div>
    }
}

类父级扩展组件{
render（）{
}
}
类子扩展组件{
render（）{
}
}

在本例中，我希望子组件div具有“flavor”属性，并且同时具有“parent class”和“Child class”两个类。但是，className=“child class”将被{…props}覆盖

我能想到的唯一解决方法是将{…props}放在子组件的类名之前：

<div {...props} className={`child-class ${props.className}`}>

这是唯一的解决办法吗？或者有更清洁的解决方案吗？

我通常使用和来解决类似的问题

import classNames from 'classnames';

class Parent extends Component {
    render() {
        <Child
            className="parent-class"
            flavor="chocolate"
        />
    }
}

class Child extends Component {
    render() {
        const { className, ...rest } = this.props;
        const childClassNames = classNames('child-class', className);

        return (
            <div className={childClassNames} {...rest}>
            </div>
        );
    }
}

从“classNames”导入类名；
类父级扩展组件{
render（）{
}
}
类子扩展组件{
render（）{
const{className，…rest}=this.props；
const childClassNames=classNames（'child-class'，className）；
返回(
);
}
}

您可以随意调用

rest

，例如，

…props

将创建一个名为

props

的对象变量，该变量将包含

此.props

中的所有内容，但

className

除外

---

此外，classnames包的使用非常广泛，并允许您执行其他很酷的操作，例如有条件地包含类名。

如果您使用的是功能组件，则该方法与Bryan Downings的答案几乎相同。为了简单起见，我只发布实现的子组件

import { Tabs as AntdTabs } from 'antd'

/**
 * simplified exmaple, based on our custom Antd Tabs*
 * AntD Tabs with custom styling pre-applied.
 * @param props The default TabsProps.
 * @returns Antd Tabs.
 */
const Tabs = (props: TabsProps) => {

    const {
        className,
        ...rest
    } = props

    const cls = classnames(className, 'custom-tabs')
    
    return (
        <>
            <AntdTabs 
                className={cls}
                {...rest} >
            </AntdTabs>
        </>
    )
}

export { Tabs }

从“antd”导入{Tabs as antdtab}
/**
*简化的exmaple，基于我们定制的Antd标签*
*预先应用自定义样式的AntD选项卡。
*@param支持默认的选项卡。
*@返回Antd选项卡。
*/
常数标签=（道具：标签标签）=>{
常数{
类名，
休息
}=道具
const cls=className（className，‘自定义选项卡’）
返回(
)
}
导出{Tabs}