reactjs - 使用 TypeScript 的 React 组件中的默认属性值

Question

我不知道如何使用 Typescript 为我的组件设置默认属性值。

这是源代码:

class PageState
{
}

export class PageProps
{
    foo: string = "bar";
}

export class PageComponent extends React.Component<PageProps, PageState>
{
    public render(): JSX.Element
    {
        return (
            <span>Hello, world</span>
        );
    }
}

当我尝试像这样使用组件时:

ReactDOM.render(<PageComponent />, document.getElementById("page"));

我收到一条错误消息，指出缺少属性 foo。我想使用默认值。我还尝试在组件内部使用 static defaultProps = ...，但我怀疑它没有效果。

src/typescript/main.tsx(8,17): error TS2324: Property 'foo' is missing in type 'IntrinsicAttributes & IntrinsicClassAttributes<PageComponent> & PageProps & { children?: ReactEle...'.

如何使用默认属性值？我公司使用的许多 JS 组件都依赖于它们，不使用它们不是一个选择。

Answer 1

带有类组件的默认 Prop

使用 static defaultProps是正确的。您还应该为 Prop 和状态使用接口(interface)，而不是类。

更新 2018/12/1:TypeScript 改进了与 defaultProps 相关的类型检查随着时间的推移。继续阅读以了解最新和最重要的用法，直至旧用法和问题。

适用于 TypeScript 3.0 及更高版本

特别是 TypeScript added support for defaultProps 使类型检查按您期望的方式工作。示例:

interface PageProps {
  foo: string;
  bar: string;
}

export class PageComponent extends React.Component<PageProps, {}> {
    public static defaultProps = {
        foo: "default"
    };

    public render(): JSX.Element {
        return (
            <span>Hello, { this.props.foo.toUpperCase() }</span>
        );
    }
}

可以在不传递 foo 的情况下进行渲染和编译属性:

<PageComponent bar={ "hello" } />

注意:

• foo 未标记为可选(即 foo?: string )，即使它不是必需的 JSX 属性。标记为可选意味着它可以是 undefined , 但实际上它永远不会是 undefined因为defaultProps提供默认值。把它想成类似于 you can mark a function parameter optional, or with a default value, but not both, yet both mean the call doesn't need to specify a value 的方式。 . TypeScript 3.0+ 对待 defaultProps以类似的方式，这对 React 用户来说真的很酷!
• defaultProps没有明确的类型注释。它的类型由编译器推断和使用，以确定需要哪些 JSX 属性。你可以使用 defaultProps: Pick<PageProps, "foo">确保defaultProps匹配 PageProps 的子集.关于此警告的更多信息是 explained here .
• 这需要 @types/react版本 16.4.11才能正常工作。

对于 TypeScript 2.1 到 3.0

在 TypeScript 3.0 实现对 defaultProps 的编译器支持之前你仍然可以使用它，它在运行时 100% 与 React 一起工作，但由于 TypeScript 在检查 JSX 属性时只考虑 Prop ，你必须使用 ? 将具有默认值的 Prop 标记为可选。 .示例:

interface PageProps {
    foo?: string;
    bar: number;
}

export class PageComponent extends React.Component<PageProps, {}> {
    public static defaultProps: Partial<PageProps> = {
        foo: "default"
    };

    public render(): JSX.Element {
        return (
            <span>Hello, world</span>
        );
    }
}

注意:

• 注释defaultProps 是个好主意与 Partial<>以便它根据您的 Prop 进行类型检查，但您不必为每个必需的属性提供默认值，这是没有意义的，因为必需的属性永远不需要默认值。
• 使用 strictNullChecks 时this.props.foo 的值将是 possibly undefined并需要一个非空断言(即 this.props.foo! )或类型保护(即 if (this.props.foo) ... )来删除 undefined .这很烦人，因为默认的 prop 值意味着它实际上永远不会未定义，但 TS 不理解这个流程。这是 TS 3.0 添加对 defaultProps 明确支持的主要原因之一。 .

TypeScript 2.1 之前

这同样有效，但你没有 Partial类型，所以省略 Partial<>并为所有必需的 Prop 提供默认值(即使永远不会使用这些默认值)或完全省略显式类型注释。

默认 Prop Functional Components

您可以使用 defaultProps在功能组件上也是如此，但是您必须将您的功能键入 FunctionComponent ( StatelessComponent 在 @types/react 之前的版本 16.7.2 )接口(interface)，以便 TypeScript 知道 defaultProps关于功能:

interface PageProps {
  foo?: string;
  bar: number;
}

const PageComponent: FunctionComponent<PageProps> = (props) => {
  return (
    <span>Hello, {props.foo}, {props.bar}</span>
  );
};

PageComponent.defaultProps = {
  foo: "default"
};

请注意，您不必使用 Partial<PageProps>任何地方因为FunctionComponent.defaultProps已在 TS 2.1+ 中指定为部分。

另一个不错的选择(这是我使用的)是解构你的 props参数并直接赋默认值:

const PageComponent: FunctionComponent<PageProps> = ({foo = "default", bar}) => {
  return (
    <span>Hello, {foo}, {bar}</span>
  );
};

那么你不需要defaultProps根本!请注意，如果您确实提供defaultProps在函数组件上，它将优先于默认参数值，因为 React 将始终显式传递 defaultProps值(所以参数永远不会未定义，因此永远不会使用默认参数。)所以你会使用一个或另一个，而不是两个。