Getting React flow error: module is not a polymorphic type. How to extend a class?
Getting React flow error: module is not a polymorphic type. How to extend a class?
我正在尝试扩展我现有的布局以基本上覆盖方法 renderHeader() 但流程不喜欢它:
module ./Layout [1] is not a polymorphic type.
我该如何解决这个问题?
这里是 class 我正在尝试扩展(它不是抽象的):
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} />;
}
}
试试这个:
//@flow
import * as React from 'react';
import Header from '../header/Header';
import '../../css/settings/utilities.css';
//Change te type to interface. Since type is not assignable to interface
type LayoutProps<T> {
children: React.Node
};
class Layout<T> extends React.PureComponent<*, LayoutProps<T>, *> {
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>
);
}
}
问题是
import * as Layout from './Layout';
导致 Layout
导入是模块对象,而它应该是 class。
由于 Layout
组件是默认导出的,因此应该是:
import Layout from './Layout';
我正在尝试扩展我现有的布局以基本上覆盖方法 renderHeader() 但流程不喜欢它:
module ./Layout [1] is not a polymorphic type.
我该如何解决这个问题?
这里是 class 我正在尝试扩展(它不是抽象的):
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} />;
}
}
试试这个:
//@flow
import * as React from 'react';
import Header from '../header/Header';
import '../../css/settings/utilities.css';
//Change te type to interface. Since type is not assignable to interface
type LayoutProps<T> {
children: React.Node
};
class Layout<T> extends React.PureComponent<*, LayoutProps<T>, *> {
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>
);
}
}
问题是
import * as Layout from './Layout';
导致 Layout
导入是模块对象,而它应该是 class。
由于 Layout
组件是默认导出的,因此应该是:
import Layout from './Layout';