reactjs - 除了其他 Prop 之外，还向子组件传递额外的类名

Question

我想将其他类名传递给子组件，并传递任何其他 Prop 。

例如:

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

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

        </div>
    }
}

在这种情况下，我希望子组件 div 具有“ flavor ” Prop ，并且还具有“父类”和“子类”两个类。然而事实上，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 包使用非常广泛，可以让您做其他很酷的事情，例如有条件地包含类名。