我正在嘗試在 react typescript 專案中使用 NavLink，但是，出現錯誤。屬性“activeStyle”在型別“IntrinsicAttributes & NavLinkProps & RefAttributes”上不存在。
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>
)
}
uj5u.com熱心網友回復：
activeStyle在 v6 中已棄用。您可以使用這樣的style功能：
<NavLink
to='/'
className='nav-link'
style={
({isActive}) => (
isActive
? {
textDecoration: 'none',
color: 'red'
}
:{}
)
}
>
Top
</NavLink>
代碼沙盒
uj5u.com熱心網友回復：
該NavLinkAPI在RRDv6改了一下，就不再是一個activeStyle道具。
導航鏈接
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); }
您可以通過 astyle或classNameprop 函式有條件地應用您的活動類。使用樣式道具。
const isActiveStyle = {
textDecoration: 'none',
color: 'red'
};
...
<NavLink
style={({ isActive }) => isActive ? isActiveStyle : {}}
to="/"
>
Top
</NavLink>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/371421.html