1

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

module ./Layout [1] 不是多态类型。

我该如何解决?

这是我试图扩展的一个类(它不是抽象的):
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;

这是我应该扩展的类: 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} />;
    }
}
4

2 回答 2

4

尝试这个:

//@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>
        );
    }
}
于 2018-12-19T12:05:50.213 回答
2

问题是

import * as Layout from './Layout';

导致Layoutimport 成为模块对象,而它应该是一个类。

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

import Layout from './Layout';
于 2018-12-19T12:13:24.050 回答