时间戳

首页 > 解决方案 > 打字稿和反应条件渲染

javascript - 打字稿和反应条件渲染

问题描述

我是 typescript 的新手，而不是 FE 开发方面的专家。我遇到了看起来很基本的问题，但我没有找到任何解决方案。也许我只是不知道如何正确地用谷歌搜索它。在反应组件中，我有一个按钮，该按钮在某些情况下被禁用，它会触发组件的功能：

import React, {Component} from 'react';

type DraftCompany = {
    id: null
    name: string,
};

type Company = Omit<DraftCompany, 'id'> & {
    id: number;
};

type Props = {
    company: Company | DraftCompany,
    onDeleteCompany: (companyId: number) => void,
}

class CompanyRow extends Component <Props> {
    handleDeleteCompany = () => {
        this.props.onDeleteCompany(this.props.company.id);
    };

    render = () => {
        return (
            <div>
                <div>{this.props.company.name}</div>
                <div>
                    <button disabled={this.props.company.id === null} onClick={this.handleDeleteCompany}/>
                </div>
            </div>
        )
    }
}

export default CompanyRow;

我在调用时收到打字稿错误，this.props.onDeleteCompany(this.props.company.id);表明我有机会null作为参数传递。我完全理解为什么打字稿会给我这个错误，问题是：处理这个错误的最佳方法是什么？

我找到了3种方法：

1）添加'if'守卫

handleDeleteCompany = () => {
        if (this.props.company.id) {
            this.props.onDeleteCompany(this.props.company.id);
        }
    };

它可以工作，但我不喜欢在每个函数中添加这样的保护，如果有人删除disabled逻辑，我希望立即收到控制台错误告诉我，而不是让它被默默吞下。在我的项目中，我有很多依赖于渲染的此类代码，我怀疑在任何地方添加此类检查是否是最佳实践。也许我错了。

2) 适用as于现场操作员：

 handleDeleteCompany = () => {
        this.props.onDeleteCompany(this.props.company.id as number);
    };

它有效，但看起来有点hacky。

3）将as运算符应用于整个对象并将其传递给函数：

 <button disabled={this.props.company.id === null} 
         onClick={() => this.handleDeleteCompany(this.props.company as Company)}/>

 handleDeleteCompany = (company: Company) => {
        this.props.onDeleteCompany(company.id as number);
    };

它有效，但看起来我没有必要传递我可以从道具中获取的函数本身的值。我不确定这样做是否是最佳做法。

我确信应该有一些纯粹的打字稿解决方案，比如将 Props 类型定义为联合或使用条件类型与 和 的某种any组合never。但我还没有弄清楚。

这里是一个游乐场： 操场

标签： javascriptreactjstypescript

解决方案

我认为根据您的要求

如果有人删除了禁用的逻辑，我想立即收到控制台错误告诉我

有一个非常简单的解决方案非常有意义，只需将您的onDeleteCompany类型从更改(companyId: number) => void为(companyId: number | null) => void，然后 TypeScript 就会很高兴。

它在语义上对您也有意义，因为您希望运行时在companyId为空时报告此错误。然后你应该允许 companyIdnull作为参数传入。

推荐阅读