没想到typescript这么多坑,昨天到今天看了一波视频教学,学了一些基础,但用起来各种定义、传参都会报错,搞得我花了大量时间去探索,最终还是屈服了any的魔爪中
目前在配置一个路由,加上菜单项做个封装的配置文件。
import Home from '@page/Home'
import NotFound from '@page/NotFound'
import Personal from '@page/personal/Personal'
import { useRoutes } from 'react-router-dom' // 使用useRoutes包装路由,需要配置好path,element
const menuRoutes = [
{
path: '/',
element: <Home/>,
name: "首页",
menuShow: false, // 是否在菜单项显示
},
{
path: '/home',
element: <Home/>,
name: "首页",
menuShow: true, // 是否在菜单项显示
children: [
{
path: 'person',
element: <Personal/>,
name: "个人",
menuShow: true,
},
]
},
{
path: '/person',
element: <Personal/>,
name: "个人",
menuShow: true,
},
{
path: '*',
element: <NotFound/>,
name: "not found",
menuShow: false,
},
]
const SetRoutes = () => {
const Routes = useRoutes(menuRoutes);
return Routes
}
export {SetRoutes,menuRoutes}
ts文件:
menuPackage = (menuList:any) => {
return menuList.reduce( ( pre: any[] , next: any ) => {
if(!next.children){
pre.push(
<Menu.Item key={next.path}>
<Link to={next.path}>{next.name}</Link>
</Menu.Item>
)
return pre
}else{
console.log(next);
pre.push(
<SubMenu key={next.key} icon={<UserOutlined />} title={next.name}>
{
next.children.map( (item:any) => {
return (
<Menu.Item key={item.path}><Link to={item.path}>{item.name}</Link></Menu.Item>
)
})
}
</SubMenu>
)
return pre
}
},[])
}
无论是给参数定义数组还是对象,最终都会报错,说不存在某个变量或者其他问题,所以统统用了any去处理。我猜想原因是定义数组时,有些变量的定义不够完善,但目前先用any应付着。等之后学得更深入,再回来解决这个问题。
<div className="logo" />
<Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
{
this.menuPackage(menuRoutes)
}
</Menu>
</Header>
在render的方法调用中,一开始我用的是(menuList:[]),果断报错“Target allows only 0 element(s) but source may have more” ,查了一轮也没明显的解决方法,于是改成any。只能说any就是个逃避的方法,为了先开发更多能见到的功能,这个坑暂时留着,再学一阵ts再回来改吧。