Question

我有以下React功能组件：

import React, { memo } from 'react';

interface Props {
  buttonType?: JSX.IntrinsicElements['button']['type'];
  text: string;
};

const defaultProps = {
  buttonType: 'button',
};

const Button: React.FunctionComponent<Props> = ({
  buttonType,
  text,
}) => (
  <button type={buttonType}>
    {text}
  </button>
);

Button.defaultProps = defaultProps;

export default memo(Button);

这会引发Typescript错误：

Type '{ buttonType: string; }' is not assignable to type 'Partial<Props>'.

这是我通常编写无状态组件的方式，这里的错误是因为我正在将defaultProps分配给该组件。如果我将defaultProps声明写为：

，该错误消失

Button.defaultProps = {
  buttonType: 'button',
};

为什么从const分配defaultProps时会出现错误，但是如果我全部以内联方式进行操作，则不会出现错误？是不是一回事？

Answer 1

您必须在buttonType对象上指定defaultProps的类型。使用JSX.IntrinsicElements['button']['type']时，这会自动推断为Button.defaultProps，但是当您创建一个新对象时，它将其视为string。

const defaultProps: Partial<Props> = {
  buttonType: 'button',
}

应该工作

来自React FunctionComponent上defaultProps的打字稿错误

1 个答案: