TypeScript：無法調用可能是“未定義”的 object

Question

我有一個可重用的組件，它接受可選的 onClick 回調 function 作為道具。

我將 Props 接口定義如下：

interface Props {
  prop1: string;
  prop2: string;
  optionalClickFn?: () => void;
}

功能性 React (JSX) 組件如下：

const ExampleComponent = (props: Props) => {
    return{
        { props.optionalClickFn ? <div
          className="delete-btn"
          onClick={() => props.optionalClickFn()}
        >
          <FontAwesomeIcon icon={faTimesCircle} color="red" />
        </div> : <div></div>}
         }
}

我已經定義了一個可選的 prop 'optionalClickFn'，因此我在執行 function 之前首先檢查它是否存在。 但是，我仍然收到錯誤消息：無法調用可能是“未定義”的 object。

Answer 1

我找到了解決方案。 以這種方式進行檢查是行不通的。 如果我在 onClick 道具中放置另一個 if 條件，它會按預期工作。

  {props.optionalClickFn ? (
    <div
      className="delete-btn"
      onClick={() => {
        if (props.optionalClickFn) {
          return props.optionalClickFn();
        }
      }}
    >
      <FontAwesomeIcon icon={faTimesCircle} color="red" />
    </div>
  ) : <div></div>}

我仍然不確定為什么它不像我在原始問題中寫的那樣工作。