Question

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

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

现在，当我按如下方式编写render方法时：

    <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？

Answer 1

在使用该函数之前，请先检查该函数是否为null：

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

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

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

1 个答案: