Reactjs 渲染组件时，如何使用connect中的道具而不必显式编写它们？

我正在使用redux/connect获取状态和动作创建者作为组件中的道具。但是，这会在呈现组件时导致Typescript出错，因为我通过connect接收的道具没有显式写入

有没有一种方法可以绕过这个问题，而不必让类型成为可选的，或者我还缺少什么

//获取数据组件

import React, {Component} from 'react';
import { connect } from "react-redux";
import { 
    getData, 
    filterMaterial,
    filterSize,
    resetMap
} from "../js/actions/index";

import { MapProperties } from '../types/state';
import { Appstate } from '../js/store';

type DispatchProps = {
    getData: () => void, 
    filterMaterial: (name:string) => void,
    filterSize: (name:string) => void,
    resetMap: () => void
}

type Props = DispatchProps & LinkStateProps

class FetchData extends Component<Props> {
    constructor(props: Props) {
        super(props);
        
        this.handleReset = this.handleReset.bind(this)
    }

    handleReset = () => {
        if(this.props.resetMap) this.props.resetMap();
    }
    
    componentDidMount() {
        if (this.props.getData) this.props.getData()
    }

    render() {        
        return (
         ...
        );
    }
}

type LinkStateProps = {
    geoJSON: MapProperties,
    mapJSON: MapProperties
}

const mapStateToProps = (state: Appstate, props:Props):LinkStateProps => {
    return { 
        geoJSON: state.geoJSON,
        mapJSON: state.mapJSON
    };
};

export default connect(mapStateToProps, {
    getData, 
    filterMaterial,
    filterSize,
    resetMap
})(FetchData);

import React from 'react';
import './App.scss';
import FetchData from './components/FetchData';

function App() {
    return (
        <div className="App">
            //error = Type '{}' is missing the following properties from type 'DispatchProps': getData, filterMaterial, filterSize, resetMap
            <FetchData />
        </div>
    );
}

export default App;

import React，{Component}来自'React'；
从“react redux”导入{connect}；
导入{
获取数据，
过滤材料，
过滤，
重置地图
}来自“./js/actions/index”；
从“../types/state”导入{MapProperties}；
从“../js/store”导入{Appstate}；
类型DispatchProps={
getData:（）=>void，
filterMaterial:（名称：字符串）=>void，
filterSize：（名称：字符串）=>void，
重置映射：（）=>void
}
类型Props=DispatchProps和LinkStateProps
类FetchData扩展组件{
建造师（道具：道具）{
超级（道具）；
this.handleReset=this.handleReset.bind（this）
}
handleReset=（）=>{
如果（this.props.resetMap）this.props.resetMap（）；
}
componentDidMount（）{
if（this.props.getData）this.props.getData（）
}
render（）{
返回(
...
);
}
}
类型LinkStateProps={
geoJSON:MapProperties，
mapJSON:MapProperties
}
const-mapStateToProps=（状态：Appstate，props:props）：LinkStateProps=>{
返回{
geoJSON:state.geoJSON，
mapJSON:state.mapJSON
};
};
导出默认连接（MapStateTops{
获取数据，
过滤材料，
过滤，
重置地图
})（获取数据）；

//应用程序组件

import React, {Component} from 'react';
import { connect } from "react-redux";
import { 
    getData, 
    filterMaterial,
    filterSize,
    resetMap
} from "../js/actions/index";

import { MapProperties } from '../types/state';
import { Appstate } from '../js/store';

type DispatchProps = {
    getData: () => void, 
    filterMaterial: (name:string) => void,
    filterSize: (name:string) => void,
    resetMap: () => void
}

type Props = DispatchProps & LinkStateProps

class FetchData extends Component<Props> {
    constructor(props: Props) {
        super(props);
        
        this.handleReset = this.handleReset.bind(this)
    }

    handleReset = () => {
        if(this.props.resetMap) this.props.resetMap();
    }
    
    componentDidMount() {
        if (this.props.getData) this.props.getData()
    }

    render() {        
        return (
         ...
        );
    }
}

type LinkStateProps = {
    geoJSON: MapProperties,
    mapJSON: MapProperties
}

const mapStateToProps = (state: Appstate, props:Props):LinkStateProps => {
    return { 
        geoJSON: state.geoJSON,
        mapJSON: state.mapJSON
    };
};

export default connect(mapStateToProps, {
    getData, 
    filterMaterial,
    filterSize,
    resetMap
})(FetchData);

import React from 'react';
import './App.scss';
import FetchData from './components/FetchData';

function App() {
    return (
        <div className="App">
            //error = Type '{}' is missing the following properties from type 'DispatchProps': getData, filterMaterial, filterSize, resetMap
            <FetchData />
        </div>
    );
}

export default App;

从“React”导入React；
导入“/App.scss”；
从“./components/FetchData”导入FetchData；
函数App（）{
返回(
//错误=类型“{}”缺少类型“DispatchProps”中的以下属性：getData、filterMaterial、filterSize、resetMap
);
}
导出默认应用程序；

这是因为您正在将

道具

传递到

映射状态

函数中

尝试：

mapToState

的第二个参数是一个可选的

ownProps

参数，仅当您需要组件的任何“自有”道具（非连接道具）来创建从状态到道具的正确映射时才需要该参数。像您那样提供

Props

会使TypeScript假定在使用组件时必须显式提供这些Props，因此您看到了错误

---

此外，您可以考虑使用TypeScript提供的一些内置功能，以节省您键入TypeScript可以自动推断类型的东西。

考虑这一点：

import React, {Component} from 'react';
import { connect } from "react-redux";

import { 
    getData, 
    filterMaterial,
    filterSize,
    resetMap
} from "../js/actions/index";

import { MapProperties } from '../types/state';
import { Appstate } from '../js/store';

const mapStateToProps = (state: Appstate) => ({
  geoJSON: state.geoJSON,
  mapJSON: state.mapJSON
});

const dispatchProps = {
  getData,
  filterMaterial,
  filterSize,
  resetMap
}

// You could do:

// type LinkStateProps = ReturnType<typeof mapStateToProps>;
// type DispatchProps = typeof dispatchProps;
// type Props = LinkStateProps & DispatchProps;

// or in one line:
type Props = ReturnType<typeof mapStateToProps> & typeof dispatchProps;

class FetchData extends Component<Props> {
    constructor(props: Props) {
        super(props);
        this.handleReset = this.handleReset.bind(this)
    }

    handleReset = () => {
        if(this.props.resetMap) this.props.resetMap();
    }

    componentDidMount() {
        if (this.props.getData) this.props.getData()
    }

    render() {
        return (
         <p>something</p>
        );
    }
}

export default connect(mapStateToProps, dispatchProps)(FetchData);

import React，{Component}来自'React'；
从“react redux”导入{connect}；
导入{
获取数据，
过滤材料，
过滤，
重置地图
}来自“./js/actions/index”；
从“../types/state”导入{MapProperties}；
从“../js/store”导入{Appstate}；
常量mapStateToProps=（状态：Appstate）=>({
geoJSON:state.geoJSON，
mapJSON:state.mapJSON
});
施工调度道具={
获取数据，
过滤材料，
过滤，
重置地图
}
//你可以做：
//类型LinkStateProps=ReturnType；
//类型DispatchProps=DispatchProps的类型；
//类型Props=LinkStateProps和DispatchProps；
//或者在一行中：
类型道具=返回类型和调度道具类型；
类FetchData扩展组件{
建造师（道具：道具）{
超级（道具）；
this.handleReset=this.handleReset.bind（this）
}
handleReset=（）=>{
如果（this.props.resetMap）this.props.resetMap（）；
}
componentDidMount（）{
if（this.props.getData）this.props.getData（）
}
render（）{
返回(
某物

);
}
}
导出默认连接（mapStateToProps、dispatchProps）（FetchData）；

---

创建名为

dispatchProps

（您无论如何都要提供给

connect

）的对象，可以使用Typescript的

typeof

操作符自动生成类型签名。由于

mapstatetops

返回一个对象，因此可以使用

ReturnType

获取该对象的类型签名。将这两者与“&”运算符结合使用，可以为您提供

道具

类型。它本质上是一种更简洁（且不易出错）的方法，可以完成与您所做的完全相同的事情。

谢谢，这就成功了，看起来很傻，我还不习惯打字