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

IT技术 reactjs typescript

2021-05-05 08:59:26

我正在将 React 与 TypeScript 一起使用，并且创建了无状态函数。为了可读性，我从示例中删除了无用的代码。

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>;
};

一切都很好，这段代码工作正常。但有我的问题：我怎么可以定义defaultProps为CenterBox组件？

正如react文档中提到的那样：

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

它应该很容易，因为：

CenterBox.defaultProps = {
    minHeight: 250
}

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

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

4个回答

经过 2 个小时的寻找解决方案......它正在工作。

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

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

然后你可以定义props，如：

CenterBox.defaultProps = { someProp: true }

请注意，这React.SFC是的别名React.StatelessComponent。

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

我相信比 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 知道您不必提供props，并且它永远不会在您的组件中“未定义”

这是它如何用于有状态函数，以防其他人偶然发现。关键是将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;
};

对于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' }

源代码中的弃用警告

FC（FunctionalComponent）输入源

其它你可能感兴趣的问题

上一篇reactjs中的render和return有什么区别？下一篇特征/几何/密度变化的水平线