时间戳

首页 > 解决方案 > 打字稿和反应 - 为什么要仔细检查道具？

reactjs - 打字稿和反应 - 为什么要仔细检查道具？

问题描述

我有一个带有以下道具的组件：

interface IChatContainerProps {
    ...
    onCollapse: Function | null;
    ...
}

现在，当我编写如下渲染方法时：

    <div className="header__pull-right">
      {
        props.onCollapse !== null
        && (
          <button
            className="close-chat-button"
            type="button"
            onClick={() => props.onCollapse()}
          />
        )
      }
    </div>

它说：

 TS2721: Cannot invoke an object which is possibly 'null'

所以我必须解构道具：

const {onCollapse} = props;
return (

    <div className="header__pull-right">
      {
        onCollapse
        && (
          <button
            className="close-chat-button"
            type="button"
            onClick={() => onCollapse()}
          />
        )
      }
    </div>
 )

这是为什么？为什么 TS 不会props.onCollapse自动计算？

标签： reactjstypescript

解决方案

在使用之前尝试检查函数是否不为空：

return (
<div className="header__pull-right">
  {
    this.props.onCollapse !== null ? 
      <button
        className="close-chat-button"
        type="button"
        onClick={() => this.props.onCollapse()}
      />
    : null
  }
</div>
)

发生这种情况是因为您的道具 onCollapse 可以为 null 或函数。如果为空，则无法成功执行代码，因此需要手动注意 onCollapse 是否为空

推荐阅读