Question

请参阅下面的代码。我必须做两次铸造以避免任何流量错误。如果我使用注释掉的行，它会抱怨。

/* @flow */

import * as React from "react";

type ConfObj = { label: string };
type Conf = React.Node | ConfObj;
type MyComponentProp = {
    confs: Array<Conf>,
}

export default function MyComponent({
  confs = [],
}: MyComponentProp) {
  const items = confs.map((item, idx) => {
    if (React.isValidElement(item)) {
      // return React.cloneElement(item, {
      return React.cloneElement(((item: any): React.Element<*>), {
        key: idx.toString(),
      });
    }

   const item2 = ((item: any): ConfObj);
   return <span>{item2.label}</span>;
   // return <span>{item.label}</span>;
  });

  return <div>items</div>
}

有没有更好的方法来避免施法。有没有更好的方法来编写isValidElement，因此一旦if条件匹配，流可以推断出类型。例如，如果它是一个有效的反应元素，为什么我需要投射它？或者如果不是，为什么访问label会出错？

Answer 1

| project_id | id | prev_time | times | |------------|----|-----------|-------| | 20 | 14 | 12.22 | 13.22 | | 40 | 13 | 12.24 | 13.22 | | 40 | 32 | 13.30 | 22.24 | | 40 | 36 | 23.22 | 23.3 | | 70 | 34 | 22.22 | 23.22 |的类型为item（Conf）当您输入Node | ConfObj语句时，if并不确定flow是否有效item（这可由Element<*>知道想想，所以你必须明确地对它进行类型转换。

flow有同样的问题。您还必须明确将其类型转换为<span>{item.label}</span>，因为ConfObj没有Node属性。

精炼流联合类型

1 个答案: