'IntrinsicAttributes 类型上不存在 activeStyle答案

【问题标题】：activeStyle does not exist on type 'IntrinsicAttributes'IntrinsicAttributes 类型上不存在 activeStyle
【发布时间】：2022-01-08 05:11:04
【问题描述】：

我正在尝试在 react typescript 项目中使用 NavLink，但是出现错误。类型“IntrinsicAttributes & NavLinkProps & RefAttributes”上不存在属性“activeStyle”。

import React from 'react'
import { NavLink } from 'react-router-dom'

export default function Nav () {
  return (
        <nav className='row space-between'>
          <ul className='row nav'>
            <li>
              <NavLink
                to='/'
                activeStyle={{
                  textDecoration: 'none',
                  color: 'red'
                }}
                className='nav-link'>
                Top
              </NavLink>
            </li>
            <li>
              <NavLink
                to='/new'
                className='nav-link'>
                New
              </NavLink>
            </li>
          </ul>
          
        </nav>
  )
}

【问题讨论】：

你在使用v6吗？建议将activeStyle 从v6 中删除。
是的，使用 v6，那里的替代选项是什么？

标签： typescript react-router-dom

【解决方案1】：

activeStyle 在 v6 中已弃用。你可以像这样使用style函数：

<NavLink
 to='/'
 className='nav-link'
 style={
  ({isActive}) => (
   isActive 
   ? {
      textDecoration: 'none',
      color: 'red'
     }
   :{}
   )
 }
>
Top
</NavLink>

Code Sandbox

【讨论】：

【解决方案2】：

NavLink API 在 RRDv6 中有所改变，不再有 activeStyle 属性。

NavLink

interface NavLinkProps
  extends Omit<LinkProps, "className" | "style"> {
  caseSensitive?: boolean;
  className?:
    | string
    | ((props: { isActive: boolean }) => string);
  end?: boolean;
  style?:
    | React.CSSProperties
    | ((props: {
        isActive: boolean;
      }) => React.CSSProperties);
}

您可以通过 style 或 className 属性函数有条件地应用您的活动课程。使用 style 属性。

const isActiveStyle = {
  textDecoration: 'none',
  color: 'red'
};

...

<NavLink
  style={({ isActive }) => isActive ? isActiveStyle : {}}
  to="/"
>
  Top
</NavLink>

【讨论】：