当前位置: 首页 > 知识库问答 >
问题:

类型“IntrinsicAttributes”上不存在activeStyle

糜俊彦
2023-03-14

我正在尝试在reacttypescript项目中使用NavLink,但是,它收到一个错误。属性“activeStyle”在“IntrinsicAt⃣tes”类型上不存在

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>
  )
}

共有2个答案

和和裕
2023-03-14

NavLinkAPI在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);
}

您可以通过< code>style或< code>className prop函数有条件地应用活动类。使用风格道具。

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

...

<NavLink
  style={({ isActive }) => isActive ? isActiveStyle : {}}
  to="/"
>
  Top
</NavLink>
湛功
2023-03-14

活动样式在 v6 中已弃用。您可以使用样式函数,如下所示:

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

代码沙箱

 类似资料:
  • 我正在尝试从API中获取数据并将数据显示到React with typeScript中的卡片列表中。由于我是Typescript中React的新手,不知道如何解决此错误,或者我是否遗漏了一些东西。 这是我得到的错误:类型“{儿童:字符串[];键:数字;}”不能分配给类型“Intrinsic属性” 这是代码: 蒂耶口袋妖怪卡组件:

  • 问题内容: 我正在使用Typescript,React和Redux(都在Electron中运行)进行项目,当我将一个基于类的组件包含在另一个组件中并试图在它们之间传递参数时,我遇到了一个问题。宽松地说,容器组件具有以下结构: 和子组件: 显然,我只包括基础知识,这两个类还有很多其他内容,但是当我尝试运行有效的代码时,仍然遇到错误。我得到的确切错误: 当我第一次遇到该错误时,我以为是因为我没有传入定

  • 在使用rxjs的角度2中,我试图将promise转换为可观察的。正如许多在线指南所显示的,我在上使用了。其中抛出错误: Observable的导入方式如下: 尝试导入像其他运算符一样会导致错误: 即使我抑制了typescript错误,它仍然会导致错误: 错误: rxjs回购协议中也报告了类似的问题,但也没有解决方案。

  • 我使用的是完全修补过的Visual Studio 2013。我正在尝试使用JQuery、JQueryUI和JSRender。我也在尝试使用打字。在ts文件中,我得到如下错误: 类型“{}”上不存在属性“fade div”。

  • 我试图在登录过程后获得连接的用户模型, 首先,在CanActivate guard检查了带有用户JSON对象的本地存储并发现该对象为空之后,用户将重定向到“/login”URL 然后用户登录并重定向回根URL“/”,在连接过程中我使用AuthService,它将从服务器返回的用户对象保存在用户模型中 这是我的守卫:

  • 升级到Angular 6.0和Rxjs到6.0后,我收到以下编译错误: