Получение ошибки потока React: модуль не является полиморфным типом. Как расширить класс?

Я пытаюсь расширить свой существующий макет, чтобы в основном переопределить метод renderHeader(), но потоку это не нравится:

модуль ./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} />;
    }
}

reactjs javascript flowtype javascript-inheritance
person jeff    schedule 19.12.2018    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Проблема в том, что

import * as Layout from './Layout';

приводит к тому, что Layout import является объектом модуля, хотя ожидается, что он будет классом.

Поскольку компонент Layout является экспортом по умолчанию, он должен быть:

import Layout from './Layout';
person Estus Flask    schedule 19.12.2018

arrow_upward
2
arrow_downward

Попробуй это:

//@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>
        );
    }
}
person Harish Soni    schedule 19.12.2018
comment
обмен типа с интерфейсом не исправляет ошибку. есть ли что-нибудь еще, что мне нужно изменить? - person jeff; 19.12.2018
comment
импортировать макет из './Layout'; исправлена ​​проблема - person jeff; 19.12.2018