reactjs - React TypeScript:路线位置和子属性的正确类型
问题描述
我有一个路由器可以传递位置和孩子的道具,但我不知道这些道具的正确类型是什么。
这是使用 react-router-dom 的路由器...
import React, { useReducer } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { globalContext, setGlobalContext } from './components/context';
import { Layout } from './components/layout';
import { defaultState, globalReducer } from './components/reducer';
import { Home } from './routes/home';
import { NotFound } from './routes/notFound';
const Router: React.FC = () => {
const [global, setGlobal] = useReducer(globalReducer, defaultState);
return (
<setGlobalContext.Provider value={{ setGlobal }}>
<globalContext.Provider value={{ global }}>
<BrowserRouter>
<Route
render={({ location }) => (
<Layout location={location}>
<Switch location={location}>
<Route exact path='/' component={Home} />
<Route component={NotFound} />
</Switch>
</Layout>
)}
/>
</BrowserRouter>
</globalContext.Provider>
</setGlobalContext.Provider>
);
};
export { Router };
在布局组件内部,我有一个用于位置和子项的接口,但是因为我不知道这些的正确类型,所以我最终使用了任何类型,然后我的 linter 就会出现问题。
import React from 'react';
interface PropsInterface {
children: any;
location: any;
}
const Layout: React.FC<PropsInterface> = (props: PropsInterface) => {
return (
<div>
<p>{props.location}</p>
<p>{props.children}</p>
</div>
);
};
export { Layout };
我得到的错误是“任何”的类型声明失去了类型安全性。考虑用更精确的类型替换它。(无)tslint(1)
我可以从导入中获取位置吗import { useLocation } from 'react-router-dom';
解决方案
您正在寻找的接口Route
可以在@types/react-router
定义中找到。
在您的项目中安装它之后,您应该能够使用如下界面来消除该 TS 错误:
// Layout.tsx
import { RouteProps } from "react-router";
interface ILayoutProps {
location: RouteProps["location"];
children: RouteProps["children"];
}
const Layout: React.FC<ILayoutProps> = (props: ILayoutProps) => {
return <div>{props.children}</div>;
};
记住,location
是一个对象,所以 React 不会让你像以前那样渲染它。
这是一个工作示例的链接:https ://codesandbox.io/s/zealous-snyder-yw9dg
另一种选择是使用Partial接口,但这将使所有ILayoutProps
可选:
interface ILayoutProps extends Partial<RouteProps> {}
推荐阅读
- oracle - GRANT SELECT 不适用于序列
- mysql - 如何将for循环的输出格式更改为字符串而不是列表?
- unity3d - 如何制作一个像地球一样的地形?
- python - 使用 PDFMiner 时出现 OSError “不是有效的 Win32 应用程序”
- excel - 上个月召回格式
- javascript - 无限循环 GoogleAppScript
- python - 为什么当代码相同时我的输出不同?
- applescript - 如何识别字符串中的 6 个连续数字?
- javascript - React Router V4,不匹配Routes中第一个父级下的任何内容
- powershell - 在 Powershell 中将两个数组输出转换为具有动态更新的表