将 React class 组件转换为函数组件

Question

我有一个摘要class:

export default abstract class TableAction<T = any, R = any> extends React.Component<T, R> {
    protected abstract onClick(e: React.MouseEvent<HTMLButtonElement>): void | Promise<void>;
    protected abstract onMouseEnter(e: React.MouseEvent<HTMLButtonElement>): void | Promise<void>;
    protected abstract onMouseLeave(e: React.MouseEvent<HTMLButtonElement>): void | Promise<void>;

    protected abstract renderContent(): React.ReactElement;

    public render = (): React.ReactElement => {
        return (
            <div onClick={() => this.onClick} onMouseEnter={() => this.onMouseEnter} onMouseLeave={() => this.onMouseLeave}>
                {this.renderContent()}
            </div>
        );
    }
}

一个实现：

export default class SendToMailTableAction extends TableAction<ISendToMailTableActionProps, ISendToMailTableActionState> {
    protected onClick = async (e: React.MouseEvent<HTMLButtonElement>): Promise<void> => {
    }

    protected onMouseEnter = (e: React.MouseEvent<HTMLButtonElement>): void => {
    }

    protected onMouseLeave = (e: React.MouseEvent<HTMLButtonElement>): void => {
    }

    protected renderContent = (): React.ReactElement => {
        return (
            <button onClick={this.onClick}>
                Send files to mail
            </button>
        );
    }
}

以及接收 React.ReactElement<TableActions>[]（抽象 class 作为元素数组）作为道具的“经理”：

ITableActionsProps {
    TableActions: React.ReactElement<TableAction>[];
}

export default class TableActions extends React.Component<ITableActionsProps, ITableActionsState> {
    render() {
        return (
            <div>
            </div>
        );
    }

我需要将所有这些 classes 转换为函数组件（挂钩）。

所以我必须让 SendToMailTableAction 成为 TableAction 类型。

我不能让函数组件成为函数以外的类型，那么对此可接受的方法是什么？

我可能遗漏了一些东西，因为我是 React 和 React hooks 的新手。

Answer 1

希望这段代码对您有所帮助。

// TableAction.tsx
interface iTableAction {
  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
  onMouseEnter?: (e: React.MouseEvent<HTMLButtonElement>) => void;
  onMouseLeave?: (e: React.MouseEvent<HTMLButtonElement>) => void;
  renderContent?: () => JSX.Element;
}

const TableAction = (props: ITableAction): React.ReactElement<ITableAction> => {
  onClick,
  onMouseEnter,
  onMouseLeave,
  renderContent,
}) => {
  return (
    <button onClick={onClick} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
      {renderContent()}
    </button>
  );
};

// SendToMailTableAction.tsx
import { TableAction } from 'components';

...

const SendToMailTableAction = (props: ISendToMailTableActionProps): React.ReactElement<ITableAction> => {
  const onClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    // Do something...
  };
  const onMouseEnter = (e: React.MouseEvent<HTMLButtonElement>) => {
    // Do something...
  };
  const onMouseLeave = (e: React.MouseEvent<HTMLButtonElement>) => {
    // Do something...
  };
  const renderContent = () => {
    return <div>{/* Render something... */}</div>;
  };

  return (
    <TableAction
      onClick={onClick}
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
      renderContent={renderContent}
    />
  );
};

将 React class 组件转换为函数组件

Convert React class components to function components

typescript

reactjs

react-functional-component