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

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

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>

所以我必须对道具进行分解：

const {onCollapse} = props;
return (

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

const{onCollapse}=props；
返回(
{
崩塌
&& (
onCollapse（）}
/>
)
}
)

---

为什么呢？为什么TS不会自动显示道具。onCollapse？

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

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

返回(
{
this.props.onCollapse！==null？
this.props.onCollapse（）}
/>
：null
}
)

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

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