超级表达式必须是 null 还是函数？答案

【问题标题】：Super expression must either be null or a function?超级表达式必须是 null 还是函数？
【发布时间】：2019-04-23 20:31:16
【问题描述】：

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

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;

【问题讨论】：

尝试在类Workflow的顶部添加constructor(props) { super(props)}
工作流组件没问题。检查错误后的代码...
对于Workflow 类，您违反了只能在constructor reactjs constructor 中分配state 的规则。不确定这是否是您的问题。

标签： reactjs flowtype

【解决方案1】：

这个错误意味着父类不是有效的类而是别的东西。

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

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

【讨论】：