超级表达式必须为null或函数？

Question

组件必须是actions列的一部分，并且为“workflow”类型呈现该组件应该只能呈现一个按钮，单击该按钮时会启动操作中配置的工作流，或者单击时启动的不同选项的下拉列表使用clicked选项作为工作流参数的工作流组件应该使用connectWorkflow装饰器，它添加了与工作流API交互的不同道具，例如startFlow，resumeFlow。可以在WorkflowManager类中看到函数及其参数当用户单击按钮或选项时，组件应从props调用startFlow函数，并在操作中配置workflowPath组件应该能够将输入数据传递给工作流，从特定的表行数据中检索。它应该能够接受ListPage列prop中动作定义中的一个选项，即一个将作为输入数据传递给startFlow函数的Object。在传递之前，应检查此对象中的任何键或值是否存在应该用表行数据替换的值中的某些值

type Props = {
    workflowPath: string;
    executionId: string,
    data: Object,
    actionHandlers: {
        [string]: {
            async: boolean,
            func: (data: { executionId: string, [string]: any }, context: Object) => any,
        },
    },
    startFlow: Function,
    resumeFlow: Function,
};


type State = {
    workflowCode: string,
    executionId: string,
    loading: boolean,
}


@connectWorkflow
class Workflow extends React.Component<Props, State> {
    static defaultProps = {
        executionId: '',
        data: {},
        actionHandlers: {},
        startFlow: () => undefined,
        resumeFlow: () => undefined,
    };

    state = {
        workflowCode: '',
        executionId: '',
        loading: true,
    };

    componentDidMount() {
        const {
            workflowPath, executionId, startFlow, resumeFlow, data, actionHandlers,
        } = this.props;

        if (executionId) {
            resumeFlow(executionId, data, actionHandlers).then(({ id: execId, workflow_name: workflowCode }) => {
                this.setState({ executionId: execId, workflowCode, loading: false });
            });
        } else {
            startFlow(workflowPath, data, actionHandlers).then(({ id: execId, workflow_name: workflowCode }) => {
                this.setState({ executionId: execId, workflowCode, loading: false });
            });
        }
    }

    componentDidUpdate(prevProps: Props) {
        const {
            workflowPath, executionId, startFlow, resumeFlow, data, actionHandlers,
        } = this.props;

        if (prevProps.workflowPath !== workflowPath) {
            if (executionId) {
                resumeFlow(executionId, data, actionHandlers).then(({ id: execId, workflow_name: workflowCode }) => {
                    this.setState({ executionId: execId, workflowCode, loading: false });
                });
            } else {
                startFlow(workflowPath, data, actionHandlers).then(({ id: execId, workflow_name: workflowCode }) => {
                    this.setState({ executionId: execId, workflowCode, loading: false });
                });
            }
        }
    }

    render() {
        const { executionId: executionIdProps } = this.props;
        const { executionId, loading, workflowCode } = this.state;

        // TODO: i18n
        return (
            <React.Fragment>
                <WorkflowForm
                    workflowCode={workflowCode}
                    executionId={executionIdProps || executionId}
                />
                {loading && (
                    <Layer margin="medium" plain>
                        <Box>
                            <Text>Loading</Text>
                        </Box>
                    </Layer>
                )}
            </React.Fragment>
        );
    }
}

export default Workflow;

然后我在这里有错误：超级表达式必须为null或函数

// @flow

import * as React from 'react';
import { Box, Button } from 'grommet';
import { Launch } from 'grommet-icons';
import connectWorkflow from '../../../../../../../../src/components/workflows/connectWorkflow';

type Props = {
    startFlow: Function,
}

@connectWorkflow
class WorkflowComponent extends React.ComponentType<Props> {
    static defaultProps = {
        startFlow: () => {
        },
    };

    handleStart = () => {
        this.props.startFlow();
    };

    render() {
        return (
            <Box>
                <Button
                    label="Star Flow"
                    position="right"
                    icon={<Launch />}
                    onClick={this.handleStart}
                />
            </Box>
        );
    }
}

export default WorkflowComponent;

Answer 1

该错误意味着父类不是有效的类，而是其他类。

React.ComponentType是一种类型，而不是一个类。它在运行时不存在，另一个类无法扩展它。 WorkflowComponent应该扩展React.Component。对于类型，它可能应该是：

class WorkflowComponent extends React.Component<Props> {...}