ReactJS TS，类型“Readonly

Question

我正在尝试键入我的组件的props并同时使用URL参数。我得到以下错误：

类型“Readonly”上不存在属性“match”

以下是我的一些代码：

import Api from '../../api/Api';

interface MyProps {
    api: Api
}

interface MyState {
    someString: string,
    loading: boolean
}

export class MyComponent extends React.Component<MyProps, MyState> {

    constructor(props: MyProps) {
        super(props);
        this.state = {
            someString: this.props.match.params.someString,//<-- Error is here on this line
            loading: true
        }
    }

    componentDidMount() {
        this.props.api.getSomeInfo(this.state.someString, this.callback)
    }

    callback() {
        let interval = setInterval(function () {
            this.setState({loading: false});
            clearInterval(interval)
        }, 3000);
    }

    render() {
        return (
            <div>
                <p>{this.someString}</p>
            </div>
        );
    }
}

正如你所看到的，我想做的就是：

1-访问：

http://localhost:8080/someStrings/:someString

2-在我的组件的构造函数中获取：一些字符串的值并存储在状态中

3-在我的状态中使用someString的值，以便能够将其作为参数传递给我的API模块来执行操作

4-当回调在API中执行时，我删除了加载动画

我的问题基本上是，我如何声明我的MyProps能够实现这一点？

Answer 1

尝试将RouteComponentProps接口添加到您的道具中。更改：

export class MyComponent extends React.Component<MyProps, MyState> {

到

export class MyComponent extends React.Component<MyProps & RouteComponentProps, MyState> {

Answer 2

我就是这样解决的

import {RouteComponentProps} from 'react-router';
interface IMyProps {}

interface IReactRouterParams {
  roomName: string;
  username: string;
}
export class MyComponent extends React.Component<
  IMyProps & RouteComponentProps<IReactRouterParams> {
 
  constructor(props: any) {
    super(props);
    //everything works here
    const {roomName, username} = this.props.match.params;
  }
}

Answer 3

这是类型定义中的一个开放问题。https://github.com/DefinitelyTyped/DefinitelyTyped/issues/17355

import { RouteProps } from 'react-router';
import React from 'react';

interface MyProps {
    api: Api
}

interface MyState {
    someString: string,
    loading: boolean
}

class MyComponent extends React.Component<Props & RouteProps, State> // Pay attention here.
{
  // your code...
}

裁判：https://github.com/DefinitelyTyped/DefinitelyTyped/issues/17355#issuecomment-336022780