如何在Flow中正确键入渲染道具？

debugcn 发表于 Dev

熟

使用渲染道具时，我不知道如何正确键入Wrapper和Counter组件。我已经尝试了以下方法，但这只会导致更多错误：

App.js

// @flow
const App = (): React.Node => {

  return (
    <div className="App">
      <Wrapper render={(count, increment) => {
        return <Counter1 count={count} increment={increment}/>
      }}/>

      <Wrapper render={(count, increment) => {
        return <Counter2 count={count} increment={increment} />
      }}/>
    </div>
  );
};

Wrapper.js

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

type WrapperProps<T> = {
  render: T => React.Node
};

export const Wrapper = <T>({render}): Props<T> => {
  const [count, setCount] = React.useState<number>(0);

  const increment = (prevCount: number) => setCount(count + 1);

  return (
    <div>
      {render(count, increment)}
    </div>
  );
}

Counter1.js

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

export const Counter1: React.Node = ({ count, increment }) => {
  return (
    <>
      <div>Counter 1: {count}</div>
      <button onClick={increment}>Increment</button>
    </>
  );
};

Counter2.js

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

export const Counter2 = ({ count, increment }) => {
  return (
    <>
      <div>Counter 2: {count}</div>
      <button onClick={increment}>Increment</button>
    </>
  );
};

我目前有14个错误，我真的迷路了。我不知道如何输入包装道具和反道具。以下是一些错误：

Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/App.js:35:17

Cannot create Counter1 element because $Iterable [1] is not a React component. [not-a-component]

     src/App.js
     32│         </div>
     33│       ))}
     34│       <Wrapper render={(count, increment) => {
     35│         return <Counter1 count={count} increment={increment}/>
     36│       }}/>
     37│
     38│       <Wrapper render={(count, increment) => {

     src/components/Counter1.js
 [1]  4│ export const Counter1: React.Node = ({ count, increment }) => {


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/App.js:35:17

Cannot create Counter1 element because React.Element [1] is not a React component. [not-a-component]

     src/App.js
     32│         </div>
     33│       ))}
     34│       <Wrapper render={(count, increment) => {
     35│         return <Counter1 count={count} increment={increment}/>
     36│       }}/>
     37│
     38│       <Wrapper render={(count, increment) => {

     src/components/Counter1.js
 [1]  4│ export const Counter1: React.Node = ({ count, increment }) => {


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/App.js:35:17

Cannot create Counter1 element because React.Portal [1] is not a React component. [not-a-component]

     src/App.js
     32│         </div>
     33│       ))}
     34│       <Wrapper render={(count, increment) => {
     35│         return <Counter1 count={count} increment={increment}/>
     36│       }}/>
     37│
     38│       <Wrapper render={(count, increment) => {

     src/components/Counter1.js
 [1]  4│ export const Counter1: React.Node = ({ count, increment }) => {


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/App.js:35:17

Cannot create Counter1 element because boolean [1] is not a React component. [not-a-component]

     src/App.js
     32│         </div>
     33│       ))}
     34│       <Wrapper render={(count, increment) => {
     35│         return <Counter1 count={count} increment={increment}/>
     36│       }}/>
     37│
     38│       <Wrapper render={(count, increment) => {

     src/components/Counter1.js
 [1]  4│ export const Counter1: React.Node = ({ count, increment }) => {


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/App.js:35:17

Cannot create Counter1 element because null [1] is not a React component. [not-a-component]

     src/App.js
     32│         </div>
     33│       ))}
     34│       <Wrapper render={(count, increment) => {
     35│         return <Counter1 count={count} increment={increment}/>
     36│       }}/>
     37│
     38│       <Wrapper render={(count, increment) => {

     src/components/Counter1.js
 [1]  4│ export const Counter1: React.Node = ({ count, increment }) => {


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/App.js:35:17

Cannot create Counter1 element because number [1] is not a React component. [not-a-component]

     src/App.js
     32│         </div>
     33│       ))}
     34│       <Wrapper render={(count, increment) => {
     35│         return <Counter1 count={count} increment={increment}/>
     36│       }}/>
     37│
     38│       <Wrapper render={(count, increment) => {

     src/components/Counter1.js
 [1]  4│ export const Counter1: React.Node = ({ count, increment }) => {


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/components/Counter1.js:4:37

Cannot assign function to Counter1 because: [incompatible-type]
 • Either inexact function [1] is incompatible with exact object type [2].
 • Or function [1] is incompatible with React.Portal [3].
 • Or property @@iterator is missing in function [1] but exists in $Iterable [4].

     src/components/Counter1.js
      1│ // @flow
      2│ import * as React from 'react';
      3│
 [1]  4│ export const Counter1: React.Node = ({ count, increment }) => {
      5│   return (
      6│     <>
      7│       <div>Counter 1: {count}</div>
      8│       <button onClick={increment}>Increment</button>
      9│     </>
     10│   );
     11│ };
     12│

     /private/tmp/flow/flowlib_1fa18dde633e97c7_501/react.js
 [2] 18│   | React$Element<any>
 [3] 19│   | React$Portal
 [4] 20│   | Iterable<?React$Node>;


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/components/Counter2.js:4:26

Cannot build a typed interface for this module. You should annotate the exports of this module with types. Missing type
annotation at array pattern: [signature-verification-failure]

     1│ // @flow
     2│ import * as React from 'react';
     3│
     4│ export const Counter2 = ({ count, increment }) => {
     5│   return (
     6│     <>
     7│       <div>Counter 2: {count}</div>


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/components/Counter2.js:4:47

Cannot build a typed interface for this module. You should annotate the exports of this module with types. Missing type
annotation at function return: [signature-verification-failure]

     1│ // @flow
     2│ import * as React from 'react';
     3│
     4│ export const Counter2 = ({ count, increment }) => {
     5│   return (
     6│     <>
     7│       <div>Counter 2: {count}</div>


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/components/Wrapper.js:8:28

Cannot build a typed interface for this module. You should annotate the exports of this module with types. Missing type
annotation at array pattern: [signature-verification-failure]

      5│   render: T => React.Node
      6│ };
      7│
      8│ export const Wrapper = <T>({render}): Props<T> => {
      9│   const [count, setCount] = React.useState<number>(0);
     10│
     11│   const increment = (prevCount: number) => setCount(count + 1);


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/components/Wrapper.js:8:39

Cannot resolve name Props. [cannot-resolve-name]

      5│   render: T => React.Node
      6│ };
      7│
      8│ export const Wrapper = <T>({render}): Props<T> => {
      9│   const [count, setCount] = React.useState<number>(0);
     10│
     11│   const increment = (prevCount: number) => setCount(count + 1);

Brianzchen

您的第一个问题与Counter1组件行有关

export const Counter1: React.Node = ({ count, increment }) => {

基本上是将Counter1键入为React.Node，您真正想要的是一个像这样返回React.Node的函数

export const Counter1 = ({ count, increment }): React.Node => {

与您有关的第二个问题与Counter2类型有关，第一个问题是必须显式键入每个模块导出的类型，以便流可以以最高性能运行，您可以在此处阅读更多内容。

Wrapper组件中的最后一个问题与以下事实有关：您有一个名为的类型，WrapperProps但是您已经使用了它，Props因此它表示找不到它。我也相信您将您放置WrappedProps在错误的位置，因此请从

export const Wrapper = <T>({render}): Props<T> => {

至

export const Wrapper = <T>({render}: Props<T>): React.Node => {

尽管回想起来，您可能想考虑父组件将如何实际使用它并传递泛型，因为您的渲染函数已经需要两个参数，因此泛型在这里并不是很有用。根据您的代码，您可能想要这样的东西

type WrapperProps = {
  render: (
    number,
    (number) => void,
  ) => React.Node,
};

export const Wrapper = ({render}: WrapperProps): React.Node => {

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。