Reactjs 如何在Flowtype中键入此组件

我在React中有这个组件，它使用

import（）

动态加载另一个组件。该组件基于此博客文章

//@flow
从“React”导入*作为React；
类型Props={
加载：（）=>承诺
};
类型状态={
组件：？React.Element，
};
导出默认类DynamicPort扩展React.Component{
状态={
组件：null，
};
组件willmount（）{
这是道具
.load（）
。然后（组件=>{
此.setState（（）=>({
component:component.default？component.default:component，
}));
})
.catch（错误=>{
控制台日志（err）；
});
}
render（）{
if（布尔值（this.state.component）==false）{
返回装载。。；
}否则{
const Component:Class=this.state.Component；
返回；
}
}
}

我这样使用它：

import（'./path/to/Component'）}/>

我还使用Flowtype来检查项目的类型，我的问题是这个组件是如何被类型化的，我经常会在初始状态为null时出错

Cannot assign this.state.component to Component because:
• null or undefined [1] is incompatible with statics of any [2].
• React.Element [3] is incompatible with statics of any [2].
• null [4] is incompatible with statics of any [2].

[1][3]  9│       component: ?React.Element<any>,
         :
   [4] 14│         component: null,
         :
       31│         if (Boolean(this.state.component) === false) {
       32│           return <div>Loading..</div>;
       33│         } else {
   [2] 34│           const Component: Class<any> = this.state.component;
       35│           return <Component {...this.props} />;
       36│         }
       37│       }

无法将此.state.component分配给组件，因为：
•null或未定义[1]与任何[2]的静态不兼容。
•反应。元素[3]与任何[2]的静力学不兼容。
•null[4]与任何[2]的静态不兼容。
[1][3]  9│       组件：？React.Element，
:
[4] 14│         组件：null，
:
31│         if（布尔值（this.state.component）==false）{
32│           返回装载。。；
33│         } 否则{
[2] 34│           const Component:Class=this.state.Component；
35│           返回；
36│         }
37│       }

您需要使用

React.ComponentType

来定义React组件的类型

此外，流无法识别您为确定是否设置了组件属性而进行的细化，因此它可能是空的

（）

/@flow
从“React”导入*作为React；
类型Props={
加载：（）=>承诺
};
类型状态={
组件：？React.ComponentType，
};
导出默认类DynamicPort扩展React.Component{
状态={
组件：null，
};
组件willmount（）{
这是道具
.load（）
。然后（组件=>{
此.setState（（）=>({
component:component.default？component.default:component，
}));
})
.catch（错误=>{
控制台日志（err）；
});
}
render（）{
如果（！this.state.component）{
返回装载。。；
}否则{
常量组件：React.ComponentType=this.state.Component；
返回；
}
}
}
谢谢，工作得很好！唯一的事情是我更喜欢使用BooLoad（）的其他类型的细化（我认为它更可读），你认为它可能是一个bug吗？如果你在流中阅读了类型细化，你会发现把属性的值传递到布尔值会被认为是一个细化失效。（您正在调用可能有副作用的函数）.Flows类型的改进依赖于强制属性为true/false，如果是特殊情况处理，则需要很少的处理。我遇到过这样做不完美的地方，因此可能存在错误，但我认为这不是一个。Array.isArray是一个特殊情况，但Buffer.isBuffer不是，例如（js core vs node）。您可能会认为已知类型的构造函数是有效的特殊情况，如果您这样认为，请向flow提交一个问题。
Cannot assign this.state.component to Component because:
• null or undefined [1] is incompatible with statics of any [2].
• React.Element [3] is incompatible with statics of any [2].
• null [4] is incompatible with statics of any [2].

[1][3]  9│       component: ?React.Element<any>,
         :
   [4] 14│         component: null,
         :
       31│         if (Boolean(this.state.component) === false) {
       32│           return <div>Loading..</div>;
       33│         } else {
   [2] 34│           const Component: Class<any> = this.state.component;
       35│           return <Component {...this.props} />;
       36│         }
       37│       }

// @flow

import * as React from 'react';

type Props = { 
   load: () => Promise<any> 
};

type State = {
    component: ?React.ComponentType<Props>,
};

export default class DynamicImport extends React.Component<Props, State> {
  state = {
      component: null,
  };

  componentWillMount() {
    this.props
        .load()
        .then(component => {
            this.setState(() => ({
               component: component.default ? component.default : component,
            }));
         })
         .catch(err => {
             console.log(err);
         });
    }

  render() {
    if (!this.state.component) {
      return <div>Loading..</div>;
    } else {
      const Component: React.ComponentType<Props> = this.state.component;
      return <Component {...this.props} />;
    }
  }
}