Блог

При создании условных классов со следующими строками кода:

 className={({ selected }) =gt;  classNames(  selected  ? 'bg-gray-100 text-gray-900'  : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900',  'group flex items-center px-2 py-2 text-base font-medium rounded-md'  ) }  

Но я продолжаю получать Type '({ selected }: { selected: any; }) =gt; string' is not assignable to type 'string'.ts(2322) ошибку.

Я попытался явно добавить any тип, но это не сработало.

Поскольку я также интегрировался eslint в свой проект, я даже попытался добавить eslint-disable-next-line @typescript-eslint/strict-boolean-expressions правило чуть выше selected параметра, но все безрезультатно.

Пожалуйста, кто-нибудь может понять, что я делаю не так?

То, что вы передаете в className prop, на самом деле является функцией, которая принимает один аргумент, а затем вызывает classNames для возврата строки. Вот откуда берется этот тип:

 ({ selected }: { selected: any; }) =gt; string  

Что вы, вероятно, хотите сделать вместо этого, так это (предполагая, что selected это существует в области):

 className={  classNames(  selected  ? 'bg-gray-100 text-gray-900'  : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900',  'group flex items-center px-2 py-2 text-base font-medium rounded-md'  ) }  

Это установит className опору на результат вызова classNames , который вам нужен — a string .