与 TypeScript 反应 - 在无状态函数中定义 defaultProps

Question

我正在使用带有 TypeScript 的 React，并且我创建了无状态函数。为了便于阅读，我从示例中删除了无用的代码。

interface CenterBoxProps extends React.Props<CenterBoxProps> {
    minHeight?: number;
}

export const CenterBox = (props: CenterBoxProps) => {
    const minHeight = props.minHeight || 250;
    const style = {
        minHeight: minHeight
    };
    return <div style={style}>Example div</div>;
};

一切都很好，这段代码工作正常。但是我的问题是：如何为CenterBox 组件定义defaultProps？

正如react docs中提到的：

(...) 它们是输入的纯函数变换，零 样板。但是，您仍然可以指定 .propTypes 和 .defaultProps 通过将它们设置为函数的属性，就像 您可以将它们设置在 ES6 类上。 (...)

应该很简单：

CenterBox.defaultProps = {
    minHeight: 250
}

但是这段代码会产生 TSLint 错误：error TS2339: Property 'defaultProps' does not exist on type '(props: CenterBoxProps) => Element'.

再说一遍：如何在上面的堆栈（React + TypeScript）中正确定义defaultProps？

Answer 1

在寻找解决方案 2 小时后...它正在工作。

如果你想定义defaultProps，你的箭头函数应该是这样的：

export const CenterBox: React.SFC<CenterBoxProps> = props => {
    (...)
};

然后你可以定义像这样的道具：

CenterBox.defaultProps = { someProp: true }

注意React.SFC 是React.StatelessComponent 的别名。

我希望这个问题（和答案）对某人有所帮助。确保你已经安装了最新的 React 类型。

Answer 2

我相信比 React 文档中描述的更好的方法是简单地使用 Javascript / Typescript 默认参数。

这里有答案：https://stackoverflow.com/a/54569933/484190 但为了方便起见，这里有一个例子：

import React, { FC } from "react";

interface CompProps {
  x?: number;
  y?: number;
}

const Comp: FC<CompProps> = ({ x = 10, y = 20 }) => {
  return <div>{x}, {y}</div>;
}

export default Comp;

这将使 Typescript 知道您不必提供该道具，并且它永远不会在您的组件中“未定义”

Answer 3

下面是有状态函数的工作原理，以防其他人偶然发现。 关键是将 defaultProps 声明为静态变量。

interface IBoxProps extends React.Props<IBoxProps> {
    x?: number;
    y?: number;
    height?: number;
    width?: number;
}

interface IBoxState {
    visible?: boolean;
}

export default class DrawBox extends React.Component<IBoxProps, IBoxState> {
    static defaultProps: IBoxProps;

    constructor(props: IBoxProps) {
        super(props);
    }
    ...
}

DrawBox.defaultProps = {
    x=0;
    y=0;
    height=10;
    weight=10;
};

Answer 4

对于功能组件，从 React 16.7.0 开始，'React.SFC' 类型已被弃用，取而代之的是 'React.FC'。

示例

type TFuncComp = React.FC<{ text: string }>

const FuncComp: TFuncComp = props => <strong>{props.text}</strong>

FuncComp.defaultProps = { text: 'Empty Text' }

Deprecation Warning in Source

FC (FunctionalComponent) Type in Source

Answer 5

使用 React.FC 在函数组件中键入默认 props 可能会导致错误类型错误：

   type Props = {
     required: string,
   } & typeof defaultProps;

   const defaultProps = {
     optDefault: 'optDefault'
   };

   const MyComponent: React.FC<Props> = (props: Props) => (
     <ul>
       <li>required: {props.required}</li>
       <li>optDefault: {props.optDefault}</li>
     </ul>
   )
   MyComponent.defaultProps = defaultProps;


   ReactDOM.render(
     <div>
       <MyComponent
         required='required'
         optDefault='over written'
       />
       <MyComponent   /* type error  <---- false type error */
         required='required'
       />
     </div>,
     document.getElementById('app')
   );

错误：

[tsserver 2741] Property 'optDefault' is missing in type '{ required: string; }' but required in type '{ optDefault: string; }'. [E]

提出的另一种解决方案是使用Javascript自己的默认函数参数：

type Props = {
  required: string,
  optDefault?: string
}

const MyComponent:  React.FC<Props> = ({
  required,
  optDefault='default'
}: Props) => (
  <ul>
    <li>required: {required}</li>
    <li>optDefault: {optDefault}</li>
  </ul>
)

ReactDOM.render(
  <div>
    <MyComponent
      required='required'
      optDefault='over written'
    />
    <MyComponent
      required='required'
    />
  </div>,
  document.getElementById('app')
);

但是这个解决方案的问题是，如果你忘记提供默认值，就会导致运行时错误：

const MyComponent: React.FC<Props> = ({
  required,
  optDefault //='optDefault' //<--- if you forgot to provide default
}: Props) => (
  <ul>
    <li>required: {required}</li>
    <li>optDefault: {optDefault}</li> {/* <-- result in bug */}
  </ul>
)

更好的解决方案是根本不使用 React.FC，只依赖 Typescript 类型推断：

type Props = {
  required: string,
} & typeof defaultProps;

const defaultProps = {
  optDefault: 'optDefault'
};

const MyComponent = (props: Props) => (
  <ul>
    <li>required: {props.required}</li>
    <li>optDefault: {props.optDefault}</li>
  </ul>
)
MyComponent.defaultProps = defaultProps


ReactDOM.render(
  <div>
    <MyComponent
      required='required'
      optDefault='over written'
    />
    <MyComponent
      required='required'
    />
  </div>,
  document.getElementById('app')
);

Answer 6

你可以把它放在你的组件中

static defaultProps: any;

Answer 7

对我来说最简单的是直接在 defaultProps 中定义（部分）默认值：

export default class TSError extends React.Component<ITSErrorProps, {}> {
  private static defaultProps: Partial<ITSErrorProps> = {
    fullPage: true,
    controlClick: true,
    doubleClick: true
  };

...

}