Как исправить ошибку Element' is not assignable to type в React?

Question

[lavezzi1]

Здравствуйте! React 18.2.0, TS 4.7.4. Есть такая конструкция:

<ul css={tw`flex items-center space-x-2`}>
          {links.map((link) => (
            <li key={link.name}>
              <NavLink to={link.to}>
                {({ isActive }) => (
                  <span
                    css={[
                      tw`w-full inline-flex items-center space-x-2 rounded-md transition-opacity p-2`,
                      isActive
                        ? tw`bg-interactive-hover`
                        : tw`opacity-50 hover:opacity-100`,
                    ]}
                  >
                    {link.name === 'Virtances' && <ServerList />}
                    {link.name === 'SSH' && <Key />}
                    {link.name === 'Settings' && <Settings />}
                    <span css={tw`font-semibold`}>{link.name}</span>
                  </span>
                )}
              </NavLink>
            </li>
          ))}
</ul>

Код работает но TS выдает ошибку, как ее исправить?

Comments

[Alex Khayev]

Код лучше текстом выкладывать в <code>, а не скриншотами

[lavezzi1]

исправил

Answer 1

[Aetae]

Ну очевидно, что NavLink не принимает функцию в качестве children. Могу предположить, что код у тебя для одной версии роутера, а используется другая.

Comments

[lavezzi1]

Чекнул доку там прям в примере в первом же примере как у меня https://reactrouter.com/en/main/components/nav-link

[lavezzi1]

You can also pass a function as children to customize the content of the component based on their active state, specially useful to change styles on internal elements.

[Aetae]

lavezzi1, ну так у тебя 6 версия? Или может таки 5?

[lavezzi1]

Aetae, 6 конечно, иначе зачем бы я писал сюда.

[Aetae]

lavezzi1, тогда должно работать. Разбирайся внимательно что у тебя там и как подключено.