擁有這個作業正常的 clsx 方法：
const getLinkClasses = (disabled: boolean) => {
return clsx('flex whitespace-nowrap', {
'text-gray-500': !disabled,
'text-gray-300 cursor-not-allowed': disabled
});
};
還有另外兩個可選變數，一個用于禁用，一個用于 !disabled，它們是字串，可以為上述方法添加新規則。讓我們稱它們為disabledValueand 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
有沒有辦法解決它？
uj5u.com熱心網友回復：
問題是您想使用“計算的屬性名稱”。
在 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 通過變數設定物件鍵
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/412989.html
標籤：
下一篇：隱藏滾動并用JS實作