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

Question

我有一个抽象类：

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>[]（作为元素数组的抽象类）作为道具：

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

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

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

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

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

我可能会遗漏一些东西，因为我是 React 和 React 钩子的新手。

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}
    />
  );
};