TS 在 React 函數組件中看不到默認道具

Question

我的代碼

interface ButtonProps {
  onClick?: () => void
}

const Button: FC<ButtonProps> = ({ onClick }) => {
  const wrapClick = () => {
    onClick() // TS2722: Cannot invoke an object which is possibly 'undefined'.
  }

  return <button onClick={wrapClick}>button</button>
}

Button.defaultProps = {
  onClick: () => {},
}

在這種情況下，一切正常

const Button: FC<ButtonProps> = ({ onClick }) => {
  const wrapClick = () => {
    onClick && onClick()
  }

  return <button onClick={wrapClick}>button</button>
}

而在這個

const Button: FC<ButtonProps> = ({ onClick = () => {} }) => {
  const wrapClick = () => {
    onClick()
  }

  return <button onClick={wrapClick}>button</button>
}

有沒有辦法使用默認道具來解決這個問題？ 因為我有很多屬性的大型組件。

Answer 1

props 對象中的 onClick 屬性使用問號標記為可選，所以我們不能直接調用該函數。

要解決此錯誤，請在調用函數時使用可選鏈接 (?.) 運算符。

import { FC } from "react";

interface ButtonProps {
  onClick?: () => void;
}

const Button: FC<ButtonProps> = ({ onClick }) => {
  const wrapClick = () => {
    onClick?.();
  };

  return <button onClick={wrapClick}>button</button>;
};

Button.defaultProps = {
  onClick: () => {}
};

export default Button;

代碼沙盒：演示

Answer 2

使用非null斷言運算符（后綴! ）讓 TypeScript 知道您的默認onClick(): void is not null / undefined （它認為這是因為IButtonProps.onClick: () => void | undefined ，它被使用按Button （ FC<IButtonProps> ， FC<T>.defaultProps的類型是T & { children?: Node }如果我沒記錯的話））。

interface IButtonProps {
  onClick?: () => void;  // No event args?
}

const Button: FC<IButtonProps> = (props) => {
  const {
    onClick = Button.defaultProps.onClick!,
  } = props;

  const wrapClick = (/* No event args? */) => {
    onClick();
  };

  return <button onClick={wrapClick}>button</button>;
};

Button.defaultProps = {
  onClick: () => {},
};