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

Question

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

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;

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

// @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

错误意味着父 class 无效 class 而不是其他东西。

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

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

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

Super expression must either be null or a function?

reactjs

flowtype