javascript - TypeScript:无法调用可能是“未定义”的对象
问题描述
我有一个可重用的组件,它接受可选的 onClick 回调函数作为道具。
我将 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',因此我在执行函数之前首先检查它是否存在。但是,我仍然收到错误:无法调用可能是“未定义”的对象。
解决方案
我找到了解决方案。以这种方式进行检查是行不通的。如果我在 onClick 道具中放置另一个 if 条件,它会按预期工作。
{props.optionalClickFn ? (
<div
className="delete-btn"
onClick={() => {
if (props.optionalClickFn) {
return props.optionalClickFn();
}
}}
>
<FontAwesomeIcon icon={faTimesCircle} color="red" />
</div>
) : <div></div>}
我仍然不确定为什么它不像我在原始问题中写的那样工作。
推荐阅读
- javascript - y轴和y轴标签d3js之间的空间
- terraform - 在 terraform 中使用嵌套变量的正确方法
- javascript - React Native - 从本地设备单击文件时如何打开我的应用程序
- qlikview - 在 qlik 意义上计算总数的百分比
- libxml2 - 如何将 libxml2 作为依赖项添加到 SwiftPM
- php - make loop 如何让数组中的值上瘾
- ethereum - abi:尝试在需要参数时解组空字符串
- asp.net - 将 USB 设备中的物理签名捕获到网页中
- css - 除了开发者模式外,如何实时编辑网站并插入 CSS 和 JS
- loops - Ansible 循环遍历以 count 为键的 dicts 列表