Question

我想将其他classNames传递给子组件，并传递其他道具。

例如：

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

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

        </div>
    }
}

在这种情况下，我希望Child组件div具有“ flavor”道具，并且还具有类“ parent-class”和“ child-class”。但是，实际上，className =“ child-class”将被{... props}覆盖。

我唯一想到的解决方法是将{... props}放在Child组件的className之前：

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

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

Answer 1

我通常将classnames package和rest operator用于这样的事情。

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>
        );
    }
}

您可以随意拨打rest，例如...props将创建一个名为props的对象变量，其中将包含this.props中除className以外的所有内容。

此外，classnames包使用非常广泛，它可以让您做其他一些很酷的事情，例如有条件地包含类名。

Answer 2

如果您使用的是功能组件，则该方法几乎与 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 }

除了其他道具外，还反应将其他classNames传递给子组件

2 个答案: