reactjs - Typescript datatyp onClick null fungerar inte

Jag försöker lära mig från en JavaScript-handledning men jag vill göra den här appen med TypeScript.

import PropTypes from 'prop-types';
import './button.scss'

const Button = (props: any | null | undefined) => {
  return (
    <button
      className={`btn ${props.className}`}
      onClick={props.onClick ? () => props.onClick() : null}
    >
      {props.children}
    </button>
  )
}

export const OutlineButton = (props:any | null | undefined) => {
  return (
    <Button
      className={`btn-outline ${props.className}`}
      onClick={props.onClick ? () => props.onClick() : null}
    >
      {props.children}
    </Button>
  )
}

Button.prototype = {
  onclick: PropTypes.func
}

export default Button

Jag fick ett fel på den här koden onClick={props.onClick ?() => props.onClick() : null}

det säger

Type '(() => any) | null' is not assignable to type 'MouseEventHandler<HTMLButtonElement> | undefined'.
  Type 'null' is not assignable to type 'MouseEventHandler<HTMLButtonElement> | undefined'.ts(2322)
index.d.ts(1489, 9): The expected type comes from property 'onClick' which is declared here on type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>'
(property) React.DOMAttributes<HTMLButtonElement>.onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined

Kan du hjälpa mig att fixa denna datatyp?

Svar #1

Du kan villkorligt skicka en onClick-funktion till Button-komponenten baserat på om props-objektet innehåller onClick-egenskapen. Här är ett exempel på hur du kan uppnå detta:

<div>
  {props.onClick ? (
    <Button onClick={props.onClick}>{props.children}</Button>
  ) : (
    <Button>{props.children}</Button>
  )}
</div>

Jag försökte refaktorera koden med TypeScript.

import React, { FC } from 'react';
import PropTypes from 'prop-types';
import './button.scss';

type ButtonProps = {
  className?: string;
  onClick?: () => void;
};

const Button: FC<ButtonProps> = ({ className, onClick, children }) => {
  const handleClick = () => {
    if (onClick) {
      onClick();
    }
  };

  return (
    <button className={`btn ${className}`} onClick={handleClick}>
      {children}
    </button>
  );
};

Button.propTypes = {
  onClick: PropTypes.func
};

export const OutlineButton: FC<ButtonProps> = ({ className, onClick, children }) => {
  const handleClick = () => {
    if (onClick) {
      onClick();
    }
  };

  return (
    <Button className={`btn-outline ${className}`} onClick={handleClick}>
      {children}
    </Button>
  );
};

export default Button;