如何在使用 Flow 时将 props 传播到使用精确 props 的 React 组件？

Question

考虑以下使用流道具的示例。

import * as React from 'react';

type FooProps = {| 
  foo: number,
  bar?: string 
|};

class Foo extends React.Component<FooProps> {}

我们有 React 组件类 Foo，它接受一个精确的 props 对象。我们希望强制执行准确性，以免用户无意中在他们的道具上打错字（例如，baz 当他们打算使用 bar 时）。

这绝对可以正常工作，并且会按预期发生错误。

但是，如果我们想从其他地方向这个组件传播 props 怎么办？例如：

const f = (props: FooProps) => <Foo {...props} />;

Flow 会在props 上给我们一个关于准确性的错误：

10: const f = (props: FooProps) => <Foo {...props} />;
                                    ^ Cannot create `Foo` element because inexact props [1] is incompatible with exact `FooProps` [2].
References:
10: const f = (props: FooProps) => <Foo {...props} />;
                                   ^ [1]
8: class Foo extends React.Component<FooProps> {}
                                     ^ [2]

不考虑“当你要求精确性时，你不应该将 props 传播到这样的组件”的论点，如何实现传播？

我确实找到了一种方法来做到这一点，但它使用了一个未记录的实用程序类型$Shape<T> (code)。目前尚不清楚这是否有任何后果或副作用，但它似乎可以正常工作：

class Foo extends React.Component<$Shape<FooProps>> {}

这是一个link to try out what I've got using $Shape<T>，其中包含我预计会出错（而不是）的项目：

Answer 1

抱歉，如果这不是来自官方来源。

解决方案：在传播之前将 cast props 键入any。

它满足您在函数内传播的要求。该函数在类型转换之前确保准确性。

注意：$Shape<FooProps> 在演员表上不起作用，它仍然认为它是准确的。也没有将props 分配给const spreadable: $Shape<FooProps> = props 似乎$Shape 并没有消除准确性，尽管在您的示例中出现了。无论哪种方式，您都必须去除准确性，并且在内部执行该功能似乎是合理的。

The Flow docs discuss type casting via any as legitimate 尽管潜在的不安全且不推荐（因为您失去了类型安全性）。我认为在上下文中它是合理的。

import * as React from 'react';

type FooProps = {| 
  foo: number,
  bar?: string 
|};

class Foo extends React.Component<FooProps> {}

const f = (props: FooProps) => <Foo {...(props: any)} />;

f({foo: 1})                     // PASS: with foo, without bar
f({foo: 1, bar: ''})            // PASS: with foo and bar
{ <Foo foo={1} /> }             // PASS: with foo, without bar
{ <Foo foo={1} bar="" /> }      // PASS: with foo and bar

f({})                           // FAIL: missing foo
f({foo: ''})                    // FAIL: wrong type of foo
f({foo: 1, bar: 1})             // FAIL: with foo, wrong type of bar
f({foo: 1, x: 1})               // FAIL: unexpected x
{ <Foo /> }                     // FAIL: missing foo
{ <Foo foo="" /> }              // FAIL: wrong type of foo
{ <Foo foo={1} bar={1} /> }     // FAIL: with foo, wrong type of bar
{ <Foo foo={1} x={1} /> }       // FAIL: unexpected x

Try it here

Answer 2

看起来这是一个很常见的问题：Exact fails when doing es6 object spread

整个线程中建议的一个选项是使用：

type Exact<T> = T & $Shape<T>

那么不要用{||}写你的类型：

type FooProps = {
  foo: number,
  bar?: string 
}

class Foo extends React.Component<Exact<FooProps>> {}

这将允许您使用扩展运算符，并且仍然可以自动完成属性。