Javascript TypeScript:无法调用可能为'；未定义'；

我有一个可重用组件，它接受可选的onClick回调函数作为道具

我已经将Props接口定义如下：

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

功能反应（JSX）组件如下所示：

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

const ExampleComponent=（props:props）=>{
返回{
{props.optionalClickFn？props.optionalClickFn（）}
>
: }
}
}

---

我已经定义了一个可选的属性'optionalClickFn'，因此在执行函数之前，我首先检查它是否存在。但是，我仍然得到错误：无法调用可能是“未定义”的对象。

我找到了解决方案。这样做是行不通的。如果我在onClick道具中放入另一个If条件，它将按预期工作

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

{props.optionalClickFn(
{
如果（道具选项点击fn）{
返回道具。可选单击fn（）；
}
}}
>
) : }

---

我仍然不确定为什么它不能像我在原始问题中写的那样工作。

没错，根据你的道具定义，它可能没有定义。如果该道具未定义，您希望组件执行什么操作？