javascript - 获取 React 流错误 : module is not a polymorphic type. 如何扩展类?

标签 javascript reactjs flowtype javascript-inheritance

我正在尝试扩展我现有的布局以基本上覆盖方法 renderHeader() 但流不喜欢它:

module ./Layout [1] is not a polymorphic type.

我该如何解决这个问题?

这是我要扩展的一个类(它不是抽象的):
Layout.js

//@flow
import * as React from 'react';
import Header from '../header/Header';
import '../../css/settings/utilities.css';

export type LayoutProps = {
    children: React.Node,
};

class Layout extends React.PureComponent<LayoutProps> {
    renderHeader() {
        return <Header />;
    }
    render() {
        return (
            <React.Fragment>
                <h1 className="u-hd">My Wee Loyalty Prime</h1>
                {this.renderHeader()}
                <main className="main">{this.props.children}</main>
            </React.Fragment>
        );
    }
}

export default Layout;

这是我的类(class),应该扩展: LayoutRegistration.js

//@flow
import * as React from 'react';
import Header from '../header/Header';
import * as Layout from './Layout';
import '../../css/settings/utilities.css';

export default class LayoutRegistration extends Layout {
    renderHeader() {
        return <Header showSubnav={false} />;
    }
}

最佳答案

问题是

import * as Layout from './Layout';

导致 Layout 导入是模块对象,而它应该是一个类。

由于 Layout 组件是默认导出的,所以它应该是:

import Layout from './Layout';

关于javascript - 获取 React 流错误 : module is not a polymorphic type. 如何扩展类?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53850845/

相关文章:

javascript - 为什么我的 `load` 函数没有被调用?

javascript - 如何指定 flowconfig 文件的路径?

javascript - '+ ((visible && "is-active") || "")' 是一个好的做法吗?

javascript - Redux-Saga 非 ajax 相关回调问题

node.js - axios 不能使用,而 fetch 可以

javascript - useMemo 钩子(Hook)的流类型

javascript - 字符串与字符串文字不兼容

javascript - 如何异步接收后端消息?

javascript - 错误消息 无法在 'appendChild' : parameter 1 is not of type 'Node' 上执行 'Node'

javascript - 如何将 css 应用于 asp.net LinkBut​​ton?