为 React + Typescript 为 clsx 创建样式规则

Question

拥有这个工作正常的 clsx 方法：

const getLinkClasses = (disabled: boolean) => {
  return clsx('flex whitespace-nowrap', {
    'text-gray-500': !disabled,
    'text-gray-300 cursor-not-allowed': disabled
  });
};

还有另外两个可选变量，一个用于 disabled 和一个用于.disabled，它们是字符串，可以为上述方法添加新规则。 我们称它们为disabledValue和notDisabledValue 。

例如，

const disabledValue = 'bg-red-100'; 
const notDisabledValue = 'bg-green-100';

为了添加这些变量，我进行了以下更改：

export interface MyProps {
  disabledValue?: string;
  notDisabledValue?: string;
}

const getLinkClasses = (disabled: boolean, style: MyProps) => {
  const notDis = `text-gray-500 ${style.notDisabledValue ?? ''}`;
  const dis = `text-gray-300 cursor-not-allowed ${style.disabledValue ?? ''}`;

  return clsx('flex whitespace-nowrap', {
    notDis: !disabled,
    dis: disabled
  });
};

问题是这两个变量notDis和dis没有被读取：

'notDis' 已声明，但它的值永远不会被读取。ts(6133)

'notDis' 被赋值但从未使用过。eslint@typescript-eslint/no-unused-vars

有没有办法解决它？

Answer 1

问题是您想使用“计算的属性名称”。

在 ES6+ 中是这样的：

const getLinkClasses = (disabled: boolean, style: MyProps) => {
  const notDis = `text-gray-500 ${style.notDisabledValue ?? ''}`;
  const dis = `text-gray-300 cursor-not-allowed ${style.disabledValue ?? ''}`;

  return clsx('flex whitespace-nowrap', {
    [notDis]: !disabled,
    [dis]: disabled
  });
};

请参阅： JavaScript 设置 object 键由变量