zoukankan      html  css  js  c++  java
  • [React Typescript 2022] Refactor a React Component using TypeScript

    We are going to start refactoring our CountDisplay component. It is a small stateless component but it has a few props that can benefit from type safety.

    There are three ways to type a component, inline, alias, and as a function expression. The inline typing adds a bit of noise to our code and can make it difficult to parse right out of the gate. To fix this, we use a type alias that reads a little bit nicer. To add in a function expression, which we get from the React Types that we downloaded, we can declare this variable to have a type of React.FunctionComponent which takes as a type argument, our props.

    JS:

    import * as React from "react";
    import cx from "clsx";
    import { scope } from "../lib/utils";
    
    function CountDisplay({ count, className }) {
        let countString = String(Math.max(Math.min(count, 999), -99));
        return (
            <div className={cx(scope("count-display"), className)}>{countString}</div>
        );
    }
    
    export { CountDisplay };

    TS:

    import * as React from "react";
    import cx from "clsx";
    import { scope } from "../lib/utils";
    
    function CountDisplay({ count, className }: CountDisplayProps) {
        let countString = String(Math.max(Math.min(count, 999), -99));
        return (
            <div className={cx(scope("count-display"), className)}>{countString}</div>
        );
    }
    
    export { CountDisplay };
    
    interface CountDisplayProps {
        count: number;
        className?: string;
    }

    Or:

    For function component:

    TS:

    import * as React from "react";
    import cx from "clsx";
    import { scope } from "../lib/utils";
    
    const CountDisplay: React.FunctionComponent<CountDisplayProps> = ({
        count,
        className,
    }) => {
        let countString = String(Math.max(Math.min(count, 999), -99));
        return (
            <div className={cx(scope("count-display"), className)}>{countString}</div>
        );
    };

    CountDisplay.displayName = "Count"; export { CountDisplay }; interface CountDisplayProps { count: number; className
    ?: string; }

    or a Shorter way:

    const CountDisplay: React.FC<CountDisplayProps> = ({
        count,
        className,
    }) => {
        let countString = String(Math.max(Math.min(count, 999), -99));
        return (
            <div className={cx(scope("count-display"), className)}>{countString}</div>
        );
    };

    FC<> always imply children, So if your component doesn't accept Children, you can use `VFC` or `VoidFunctionComponent`.

    const CountDisplay: React.VFC<CountDisplayProps> = ({
        count,
        className,
    }) => {
        let countString = String(Math.max(Math.min(count, 999), -99));
        return (
            <div className={cx(scope("count-display"), className)}>{countString}</div>
        );
    };

    Read more 

    TypeScript + React: Why I don't use React.FC

  • 相关阅读:
    ExtJS5入门
    时间序列异常检测
    RNN实例
    数据清洗入门
    异常检测LOF
    sklearn异常检测demo
    孤立森林(Isolation Forest)
    WCF初见之SQL数据库的增删改查
    NHibernate与EF(Entity Framework)的区别
    解决IIS7虚拟目录出现HTTP 错误 500.19(由于权限不足而无法读取配置文件)的问题
  • 原文地址:https://www.cnblogs.com/Answer1215/p/15742796.html
Copyright © 2011-2022 走看看