在 TypeScript 中从 React.router.dom 添加到 props.location.state 的类型

Question

我试图从 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;

Answer 1

您可以通过将 state 的接口定义为 RouteComponentProps<InterfaceA, InterfaceB, InterfaceForState> 的泛型来访问 state prop。

请看以下内容：

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; } 接口，可以以类型安全的方式使用。