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

  • 相关阅读:
    Create方法失效而没有提示错误信息
    JS弹出窗口控制
    本周活动
    JavaScript的初步了解
    关于PHP接收文件的资料
    mvc模式改进网站结构
    一周动态
    排序
    Java的内存泄漏
    Android笔记
  • 原文地址:https://www.cnblogs.com/Answer1215/p/15742796.html
Copyright © 2011-2022 走看看