Convert React class components to function components-CodePudding

I have an abstract 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 onm ouseEnter(e: React.MouseEvent<HTMLButtonElement>): void | Promise<void>;
    protected abstract onm ouseLeave(e: React.MouseEvent<HTMLButtonElement>): void | Promise<void>;

    protected abstract renderContent(): React.ReactElement;

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

An implementation:

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

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

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

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

And a "manager" that recieves React.ReactElement<TableActions>[] (the abstract class as an array of elements) as a prop:

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

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

I need to convert all of these classes to be a function components (hooks).

So I must have the SendToMailTableAction be a TableAction type.

I can't have a function component be a type other than a function, so what would be an acceptable approach for this?

I might be missing something as I'm new to React and React hooks specifically.

CodePudding user response：

Hope this code helps.

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

const TableAction = (props: ITableAction): React.ReactElement<ITableAction> => {
  onClick,
  onm ouseEnter,
  onm ouseLeave,
  renderContent,
}) => {
  return (
    <button onClick={onClick} onm ouseEnter={onMouseEnter} onm ouseLeave={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 onm ouseEnter = (e: React.MouseEvent<HTMLButtonElement>) => {
    // Do something...
  };
  const onm ouseLeave = (e: React.MouseEvent<HTMLButtonElement>) => {
    // Do something...
  };
  const renderContent = () => {
    return <div>{/* Render something... */}</div>;
  };

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