reactjs - TypeScript 提示组件缺少由 redux 注入(inject)的属性

Question

我是 typescript 和 Redux 的新手。我正在使用 Redux 将属性(状态)注入(inject)组件。当我渲染组件时，我没有传递任何 Prop ，因为它们是由 redux 注入(inject)的，所以它提示缺少 Prop 。当我将鼠标悬停在 <RelatedFilesTableContainer/> 上时我看到以下错误消息。感谢您的帮助!

Exact Error: (TS) Type '{}' is missing the following properties fromtype '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 注入(inject)的 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;