zoukankan      html  css  js  c++  java
  • [React Typescript 2022] Use TypeScript to Type a React Class Component

    For older applications, it's likely that you have some Class components. TypeScript works a little differently with these. The React.Component class is a generic class and it takes the props type as its first type argument. We will write out an alias for our props that I'll pass in the type argument space for the class. Child classes can also implement their own various methods for overriding parent methods, we'll also want to explicitly type the props in our constructor.

    import * as React from "react";
    
    interface CounterProps {
        initialCount?: number;
        className?: string;
    }
    interface CounterState {
        count: number;
    }
    class Counter extends React.Component<CounterProps, CounterState> {
        state: CounterState = {
            count: this.props.initialCount ?? 0,
        };
    
        constructor(props: CounterProps) {
            super(props);
            this.increment = this.increment.bind(this);
            this.decrement = this.decrement.bind(this);
        }
    
        shouldComponentUpdate(nextProps: CounterProps, nextState: CounterState) {
            return shallowCompare(this, nextProps, nextState);
        }
    
        increment() {
            this.setState(({ count: prevCount }) => ({
                count: prevCount + 1,
            }));
        }
    
        decrement() {
            this.setState(({ count: prevCount }) => ({
                count: prevCount - 1,
            }));
        }
    
        render() {
            return (
                <div className={this.props.className}>
                    <button type="button" onClick={this.decrement} aria-label="Decrement">
                        -
                    </button>
                    <span>{this.state.count}</span>
                    <button type="button" onClick={this.increment} aria-label="Increment">
                        +
                    </button>
                </div>
            );
        }
    }
    
    export { Counter };
  • 相关阅读:
    bzoj3932 [CQOI2015]任务查询系统
    bzoj1901 Zju2112 Dynamic Rankings
    bzoj3524 [Poi2014]Couriers/2223 [Coci 2009]PATULJCI
    bzoj1529 [POI2005]ska Piggy banks
    bzoj1552 [Cerc2007]robotic sort
    bzoj2208 [Jsoi2010]连通数
    2016NOI冬令营day5
    A1035 Password (20)(20 分)
    1048 数字加密(20 分)
    福尔摩斯的约会
  • 原文地址:https://www.cnblogs.com/Answer1215/p/15750753.html
Copyright © 2011-2022 走看看