javascript - 如何使用流类型中的类组件注释传递附加道具的 React HOC
问题描述
以下代码用于注释传入道具的 HOC
/* @flow */
import * as React from 'react';
/* withHoverState HOC */
type State = {
hover: boolean,
};
export type InjectedProps = {|
foo: string
|};
function withHoverState<T>(
InnerComponent: React.ComponentType<{| ...T, ...InjectedProps |}>
): React.AbstractComponent<T> {
return (props) => <InnerComponent {...props} foo="bar" />
};
/* Button HOC */
type ButtonProps = {|
text: string,
...InjectedProps
|}
const UnwrappedButton = ({ text, foo }: ButtonProps) => <button>${text} - ${foo}</button>
const Button = withHoverState(UnwrappedButton);
/* Test usage */
const Test1 = () => <Button text="test" />
但是,我需要内部组件是一个类,当我改变它时,流程不再快乐
/* @flow */
import * as React from 'react';
/* withHoverState HOC */
type State = {
hover: boolean,
};
export type InjectedProps = {|
foo: string
|};
function withHoverState<T>(
InnerComponent: React.ComponentType<{| ...T, ...InjectedProps |}>
): React.AbstractComponent<T> {
class Inner extends React.Component<T> {
render() {
return (
<InnerComponent
foo="bar"
{...this.props}
/>
);
}
};
return Inner;
}
/* Button HOC */
type ButtonProps = {|
text: string,
...InjectedProps
|}
const UnwrappedButton = ({ text, foo }: ButtonProps) => <button>${text} - ${foo}</button>
const Button = withHoverState(UnwrappedButton);
/* Test usage */
const Test1 = () => <Button text="test" />
给出错误
29: return Inner;
^ Cannot return `Inner` because inexact class `Inner` [1] is incompatible with exact `T` [2].
References:
19: class Inner extends React.Component<T> {
^ [1]
[LIB] ..//static/v0.122.0/flowlib/react.js:258: > = React$AbstractComponent<Config, Instance>;
谁能告诉我如何使注释与类组件一起使用?
解决方案
推荐阅读
- java - MainActivity 不能转换为 Fragment
- python-3.x - 烧瓶中的 REMEMBER_COOKIE_DURATION 不起作用
- python - 无法在python中播放音频文件
- reactjs - React Suite Accepter 组件在更改时不更新表单值
- ios - 如何安装包含 cocoapod 的 cocoapod?
- sql - 如何在 oracle 触发器中转换日期类型变量的时区
- typescript - 如何使用自定义返回类型在 type-graphql 中创建 GraphQL 查询
- php - Timber/Twig - 如何访问组内中继器内的 Wordpress Post 对象
- android - 如何使用视图模型将数据从 DialogFragment 发送到 Fragment
- c++ - 功能:声明/定义和通过值/引用传递参数