Reactjs 如何将返回类型指定为具有流的React组件列表

我在其他地方见过有人使用

React$Element

，所以我认为返回这些元素的数组就像在末尾添加

[]

一样简单。我在这里试过：

navbarItems: INavbarItem[];

getNavbarItems(): React$Element<NavbarItem>[] {
  return this.navbarItems.map((navbarItem, index) => {
    return (
      <NavbarItem
        key={index}
        title={navbarItem.title}
        icon={navbarItem.icon}
        listPath={navbarItem.listPath}
        createPath={navbarItem.createPath}
      />
    );
  });
}

navbarItems:INavbarItem[]；
getNavbarItems（）：React$Element[]{
返回此.navbarItems.map（（navbarItem，index）=>{
返回(
);
});
}

NavbarItem

class NavbarItem扩展组件{
建造师（道具：道具）{
超级（道具）；
/*东西*/
}
/*两个函数*/
render（）{
返回(

{this.state.open&&(

列表
创造

)}

);
}
}

但是，当我运行flow时，会出现以下错误：

无法返回

this.navbarItems.map（…）

，因为

NavbarItem

[1]的静态与数组元素的类型参数

ElementType

[3]中的

NavbarItem

[2]不兼容

[1] 类[NavbarItem]扩展组件

[2] getNavbarItems（）：React$Element[]

[3] 声明类型React$Element（来自React.js）

---

[]以上表示“^”在错误消息中指向的位置。作为flow的新手，我不确定这里组件的静态是什么意思。

首先，您可能还应该使用类型而不是

React$ElementType

，因为后者应该是内部的。

React.Element

的文档还提示您需要使用来指定

NavbarItem

类的类型：

（）

import*作为来自“React”的React
// ...
福班{
navbarItems:INavbarItem[]；
getNavbarItems（）：React.Element[]{
返回此.navbarItems.map（（navbarItem，index）=>{
返回(
);
});
}
}

如果使用

React$ElementType

，此选项仍然有效：

（）

class-Foo{
navbarItems:INavbarItem[]；
getNavbarItems（）：React$Element[]{
返回此.navbarItems.map（（navbarItem，index）=>{
返回(
);
});
}
}

我刚刚在同样的情况下尝试了你的代码，效果不错。你能添加

NavbarItem

code吗？@KirillGlazunov你需要看什么？由于错误消息包含“statics of

NavbarItem

”，我想这可能是由某些静态方法或属性引起的。@KirillGlazunov请参见编辑，我已经去掉了大部分绒毛。这没有帮助（错误链接（[1]，[2]），[3]）？太棒了，抱歉耽误了接受。今天才回到办公室查看

class NavbarItem extends Component<Props, any> {
  constructor(props: Props) {
    super(props);
    /* stuff */
  }

  /* Couple of functions */

  render() {
    return (
      <li>
        <DropdownTitle/>
        {this.state.open && (
          <ul>
            <MenuItem>List</MenuItem>
            <MenuItem>Create</MenuItem>
          </ul>
        )}
      </li>
    );
  }
}

import * as React from 'react'

// ...

class Foo {
   navbarItems: INavbarItem[];

  getNavbarItems(): React.Element<typeof NavbarItem>[] {
    return this.navbarItems.map((navbarItem, index) => {
      return (
        <NavbarItem
          key={index}
          title={navbarItem.title}
          icon={navbarItem.icon}
          listPath={navbarItem.listPath}
          createPath={navbarItem.createPath}
        />
      );
    });
  }
}

class Foo {
   navbarItems: INavbarItem[];

  getNavbarItems(): React$Element<typeof NavbarItem>[] {
    return this.navbarItems.map((navbarItem, index) => {
      return (
        <NavbarItem
          key={index}
          title={navbarItem.title}
          icon={navbarItem.icon}
          listPath={navbarItem.listPath}
          createPath={navbarItem.createPath}
        />
      );
    });
  }
}