Question

在尝试使用流程在React组件上键入属性时，有一个有趣的时间，其中属性可以是枚举或对象。

似乎当我在可以具有多个类型（联合）的可选属性之后使用{...spread}作为属性时，流程始终会指出它们不兼容。

这个想法是允许该属性既可以是枚举的字符串值，也可以是其值类型也必须是该枚举的对象。

如果将{...spread}放在属性之前，确实可以，但这不是理想的功能。

例如（Try Flow）：

/* @flow */
import React from 'react';

type _TextAlign = 'left' | 'center' | 'right';

type TextAlign = _TextAlign | { [key: string]: _TextAlign };

type Props = { textAlign?: TextAlign }

const CStr = (props: Props) => <div textAlign="center" {...props}  />;

给予

8: type Props = {  textAlign?: TextAlign }
                               ^ object type [1] is incompatible with string [2].

Answer 1

看看您的Props类型的一些可能值：

{ 'textAlign': 'left' }
{ 'textAlign': { 'a': 'right', 'b': 'center' }

因此，当您进入这一部分时：

<div textAlign="center" {...props}  />;

由于{ 'a': 'right', 'b': 'center' }不是字符串，也不是textAlign的有效值，您会收到错误消息。

您可以将所有可能的值构建为具有键和值的类型：

type TextAlign = { textAlign?: _TextAlign } | { [key: string]: _TextAlign };
type Props = { ...TextAlign };

但这实际上与以下内容相同：

type TextAlign = { [key: string]: _TextAlign };
type Props = { ...TextAlign };

如果您还允许其他任何键，则指定可选的'textAlign'键没有任何好处。

具有属性扩展的React组件上可选属性的流类型

1 个答案: