'Function' 类型的参数不可分配给 'ComponentType<never>' 类型的参数

Question

我正在尝试将组件从react-redux 传递给connect 方法。我收到此错误：

“函数”类型的参数不能分配给“组件类型”类型的参数。 类型“Function”不可分配给类型“FunctionComponent”。 类型 'Function' 不匹配签名 '(props: never, context?: any): ReactElement |空'。

这是容器

const mapStateToProps = (state: globalStateType, ownProps: OffersProps) => ({
  ...state,
  ...ownProps,
});

const mapDispatchToProps = (dispatch: Function) => ({
  handleSetSelectedOfferId: (
    selectedOfferId: selectedOfferIdType,
  ): HandleSetSelectedOfferIdInterface => dispatch(setSelectedOfferId(selectedOfferId)),
});

export const OffersContainer = connect(mapStateToProps, mapDispatchToProps)(OffersComponent);

这是组件：

export const OffersComponent: Function = ({ dataset }: OffersProps): JSX.Element[] => dataset.map(({
  id, firstName, city, price, image, description,
}): React.ReactElement => (
  <FlexWrapper key={id.$oid}>
    <OfferContainer
      id={id}
      firstName={firstName}
      city={city}
      price={price}
      image={image}
      description={description}
    />
  </FlexWrapper>

));

知道我错过了什么吗？

编辑：

从中删除Function

export const OffersComponent: Function = ({ dataset }: OffersProps): JSX.Element[] => dataset.map(({

所以现在看起来像这样：

export const OffersComponent = ({ dataset }: OffersPropsInterface): JSX.Element[] => dataset.map(({

导致此错误：

'({ dataset }: OffersPropsInterface) => JSX.Element[]' 类型的参数不可分配给'ComponentType' 类型的参数。 类型 '({ dataset }: OffersPropsInterface) => JSX.Element[]' 不可分配给类型 'FunctionComponent'。 类型 'Element[]' 缺少来自类型 'ReactElement' 的以下属性：类型、道具、键 TS2345

Answer 1

export const OffersComponent: Function = ({ dataset }: OffersProps): JSX.Element[] => dataset.map(({

您面临的直接问题是Function 太不具体了。它实际上可以是任何旧函数，并且您不能将任何旧函数传递给连接。所以一种选择是使用 react 提供的 FunctionComponent 类型：

import React, { FunctionComponent } from 'react';

export const OffersComponent: FunctionComponent<OffersProps> = ({ dataset }) => {

如果您愿意，名称 FC 下也存在完全相同的类型，如 import { FC } from 'react';

或者你可以删除: Function 并自己做类型。但是，你会遇到另一个问题：类型定义不会让 React 组件返回数组，所以返回类型应该是 ReactElement。如果你想返回多个元素，你可以，但你会在一个片段中这样做：

import React, { ReactElement } from 'react';

export const OffersComponent = ({ dataset }: OffersProps): ReactElement => {
  return (
    <React.Fragment>
      {dataset.map(({
        id, firstName, city, price, image, description,
       }) => {
         // etc
       }
     )}
    </React.Fragment>
  );
}

---

const mapDispatchToProps = (dispatch: Function) => ({

你也可以在这里改进类型：

import { Dispatch } from 'redux';

const mapDispatchToProps = (dispatch: Dispatch) => ({