可重用反应组件中的prop类

Question

对你来说，React geniuses很容易让人感到轻松。对我来说，学习这些东西，而不是......但我尝试:)这是我想要做的

我正在构建小型可重用组件，并且我已成功传递道具来控制组件属性，但是一个让我不知所措的是类。请参阅下面的组件

const CMLabel = ({ classes, children, ...otherProps }) => {
    return (
        <FormLabel 
            component="label" 
            {...otherProps}
            className={classes.label}>
            {children}
        </FormLabel>

    );
};

这可以这样使用

<CMLabel>Hello World </CMLabel>

它将使用组件中指定的标签类进行渲染，如下所示：

<label class="label">Hello World </label>

但是，我想给它更多的自由，以便能够像这样使用它：

<CMLabel className="myClass">Hello World </CMLabel>

它将以这种方式呈现（使用组件时组件和myClass中添加的标签）：

<label class="label myClass">Hello World </label>

如何将此功能添加到我的道具中，以便呈现标签类和他们选择输入的附加类？我希望那是怎样的... otherProps可以工作，但我没有让它工作。我是否需要在className={}内级联... otherProps？怎么样？

Answer 1

你走在正确的道路上。您缺少的是将默认className与通过组件props提供的className合并。你可以做的是创建一个类名数组并将所有其他类名推送到该数组中。就像这样;

const CMLabel = (props) => {
    const classNames = [props.classes.label];
    if (props.className) {
        classNames.push(props.className);
    }
    return (
        <FormLabel 
            component="label" 
            className={classNames.join(' ')} >
            {props.children}
        </FormLabel>

    );
};