reactjs - 在 TypeScript 中从 React.router.dom 添加到 props.location.state 的类型
问题描述
我试图从 props.location.state 获取一个对象,但 TypeScript 给了我一个错误。这是我可以从状态中获取对象的唯一方法:
import React, { FC } from 'react';
import { RouteComponentProps } from 'react-router-dom';
import AssetData from '../interfaces/dataInterface';
type Props = {
location: RouteComponentProps;
};
const DetailPage: FC<Props> = ({ location }: Props) => {
const { state }: any = location;
const data: AssetData = state.movieData;
return <div style={{ fontSize: '65px', marginTop: '100px' }}>{data?.title}</div>;
};
export default DetailPage;
解决方案
您可以通过将 state 的接口定义为RouteComponentProps<InterfaceA, InterfaceB, InterfaceForState>
.
请参阅以下内容:
import React, { FunctionComponent } from "react";
import { RouteComponentProps } from "react-router-dom";
type Props = {
location: RouteComponentProps<{ bla: string }, {}, { state: string }>;
};
const DetailPage: FunctionComponent<Props> = (props) => {
const yourStateProp = props.location.location.state;
return (
<div style={{ fontSize: "65px", marginTop: "100px" }}>
{JSON.stringify(yourStateProp)}
</div>
);
};
export default DetailPage;
以上等价于:
import React, { FunctionComponent } from "react";
import { RouteComponentProps } from "react-router-dom";
type Props = {
location: RouteComponentProps<{ bla: string }, {}, { state: string }>;
};
const DetailPage: FunctionComponent<Props> = ({ location: { location: { state }}}) => {
return (
<div style={{ fontSize: "65px", marginTop: "100px" }}>
{JSON.stringify(state)}
</div>
);
};
export default DetailPage;
状态对象现在等于之前定义的{ state: string; }
接口,并且可以以类型安全的方式使用。
推荐阅读
- python - 使用 mayavi mlab.points3d 制作动画
- c# - 使用 Func 参数化的 C# ThreadStart
- perl - 读取文件后多余的符号
- javascript - React Native 图书动画
- python - 有什么方法可以在不使用 Python 中的可执行文件的情况下抓取 JS 渲染页面?
- css - React Native 中的动画字段宽度
- android - Recycleview 项目大小在对话框片段中不起作用
- opencart - OpenCart 本地到实时服务器
- docker - 在 Jenkins 和 openshift 中运行 docker 容器
- java - 错误:[Dagger/MissingBinding] [dagger.android.AndroidInjector.inject(T)] Dagger