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 };
  • 相关阅读:
    如何将DataTable转换成List<T>
    关于SqlDataAdapter的使用
    VS 2010中JS代码折叠插件
    ASP.net中的几种分页方法
    学习jquery基础教程的一些笔记
    js中innerHTML与innerText的用法与区别
    SpringBoot 中使用shiro注解使之生效
    redis分布式锁
    使用ZSetOperations(有序)操作redis
    使用SetOperations(无序)操作redis
  • 原文地址:https://www.cnblogs.com/Answer1215/p/15750753.html
Copyright © 2011-2022 走看看