reactjs typescript中组件中的额外可选类名

bqf10yzr 于 12个月前发布在 React

关注(0)|答案(2)|浏览(113)

我正在使用classname向一个React组件中添加许多类。在我的按钮中，我希望有机会向组件中添加一个类，如果我想的话，它应该是可选的。
但我得到一个类型错误，见所附图像

我如何才能摆脱错误？

按钮代码 *

import classnames from "classnames";
import styles from "./button.module.css";

interface ButtonProps {
    children: JSX.Element;
    onClick: () => void;
    small?: boolean;
    className?: string;
}

function Button({ onClick, children, small, className }: ButtonProps) {
    return (
        <button
            className={classnames(styles.button, {
                [styles.small]: small,
                [className]: !!className,
            })}
            onClick={onClick}
        >
            {children}
        </button>
    );
}

export default Button;

字符串

错误：*

第一个月

reactjs

来源：https://stackoverflow.com/questions/65632060/extra-optional-classname-in-a-component-in-typescript

2条答案

按热度按时间

jutyujz01#

您的className被用作属性名，即使它可能未定义。请注意，可选的string实际上是string | undefined。我将使用对象扩展来实现条件性。
classnames函数的新参数：

{
  [styles.small]: small,
  ...(typeof className === 'string' ?
    { [className]: true } :
    {}
  )
}

字符串

赞(0）回复(0）举报 12个月前

bvuwiixz2#

如果转发props.className的条件只有!!props.className，那么可以直接将它们作为参数传递给classnames()：

classnames(styles.button, props.className, {
  [styles.small]: props.small,
})

字符串
如果你想插入!!props.className以外的逻辑，可以将其添加为&&的第一次检查：

const forwardedClass = !!getComplexValue() && props.className; // Order is important

classnames(styles.button, forwardedClass, {
  [styles.small]: small,
})

型
示例如下：

classnames('button-class', undefined, {
  'small-class': false
})
// 'button-class'

classnames('button-class', 'foobar w-full', {
  'small-class': true
})
// 'button-class foobar w-full small-class'

classnames('button-class', false && 'foobar w-full', {
  'small-class': false
})
// 'button-class'

型
️订单很重要：

classnames(
  'button-class',
  {
    'small-class': false, // <-- About to be overwritten
  },
  true && 'small-class' // <-- Overwrites previous check
);
// 'button-class small-class'

型

赞(0）回复(0）举报 12个月前

我来回答

reactjs typescript中组件中的额外可选类名

2条答案

相关问题

热门标签

最新问答