TypeScript 抱怨组件缺少由 redux 注入的属性

Question

我是 typescript 和 Redux 的新手。我正在使用 Redux 将属性（状态）注入到组件中。当我渲染组件时，我没有传递任何道具，因为它们是由 redux 注入的，所以它抱怨道具丢失了。 当我将鼠标悬停在 <RelatedFilesTableContainer/> 上时，我看到以下错误消息。感谢您的帮助！

确切错误：(TS) 类型“{}”缺少以下属性 输入“IReportStore”：showOrphaned、filters、filterFile

import * as React from "react";
import { RouteComponentProps } from "react-router";
import RelatedFilesTableContainer from "@Components/reportView/RelatedFilesTable";

type Props = RouteComponentProps<{}>;

const ReportPage: React.FC<Props> = () => {
    return <div>
        <RelatedFilesTableContainer />
    </div>;
}

export default ReportPage;

正在渲染的组件在下面

import React from "react"
import { Container, Table } from "react-bootstrap";
import CheckBoxContainer from "@Components/reportView/Checkbox"
import ReportTableHeader from "@Components/reportView/ReportTableHeader";
import CollapsibleRow from "@Components/reportView/CollapsibleRow";
import * as reportStore from "@Store/reportStore";
import { withStore } from "@Store/index";

let renderCollapsibleRows = (filterFile: Object) => {
    let collapsibleRows = [];
    console.log(filterFile.RelatedFiles);
    filterFile.RelatedFiles.forEach(relatedFile => collapsibleRows.push(<CollapsibleRow rowData={relatedFile}/>));
    return collapsibleRows;
}

type Props = reportStore.IReportStore;
const RelatedFilesTable: React.FC<Props> = ({ filterFile }) => {
    return (
        <Container>
            <div className="d-flex justify-content-between">
                <p>{filterFile.FilterFileName}</p>
                <CheckBoxContainer />
            </div>
            <Table striped bordered hover>
                <ReportTableHeader />
                <tbody>{renderCollapsibleRows(filterFile)}</tbody>
            </Table>
        </Container>
    )
}

// Connect component with Redux store.
var RelatedFilesTableContainer = withStore(
    RelatedFilesTable,
    state => state.report, // Selects which state properties are merged into the component's props.
    reportStore.actionCreators, // Selects which action creators are merged into the component's props.
);

export default RelatedFilesTableContainer

Answer 1

您希望您的 Props 定义还包括由 redux 注入的 props 的类型（使用 withState 函数）。您可以通过拆分单独的 mapStateToProps 和 mapDispatchToProps 函数并以此推断 Props 来做到这一点，如下所示：

const mapStateToProps = (state) => state.report;
const mapDispatchToProps = reportStore.actionCreators;

type Props = reportStore.IReportStore &
  ReturnType<typeof mapStateToProps> &
  typeof mapDispatchToProps;

const RelatedFilesTable: React.FC<Props> = ({filterFile}) => { ... }

var RelatedFilesTableContainer = withStore(
  RelatedFilesTable,
  mapStateToProps,
  mapDispatchToProps,
);

export default RelatedFilesTableContainer;