React 和 TypeScript

Props

import React from 'react'

// 可引入 FC 或不引入直接使用 React.FC
// import type { FC } from 'react'

// 定义参数类型
interface WelcomeProps {
  message?: string
  list: number[]
  status?: 'loading' | 'success' | 'error'
  info: {
    username: string
    age: number
  }
}

const Welcome: React.FC<WelcomeProps> = props => {
  return (
    <>
      <h2>Welcome to {props.message}</h2>
      <ul>
        {props.list.map(item => (
          <li>{item}</li>
        ))}
      </ul>
    </>
  )
}

// 设置组件默认值
Welcome.defaultProps = {
  message: 'Welcome Message Default',
  status: 'loading'
}

const Home: React.FC = props => {
  return (
    <>
      <h1>Hello world!</h1>
      <Welcome
        status="loading"
        message="React"
        list={[1, 2, 3, 4, 5]}
        info={{ username: '张三', age: 18 }}
      />
    </>
  )
}

export default Home

Children

import React from 'react'

interface WelcomeProps {
  // 满足单标签，双标签的各种情况
  children?: React.ReactNode
}

const Welcome: React.FC<WelcomeProps> = props => {
  return <div>children：{props.children}</div>
}

const Home: React.FC = props => {
  return (
    <>
      <h1>Hello world!</h1>
      <hr />
      <Welcome />
      <hr />
      <Welcome>Welcome</Welcome>
      <hr />
      <Welcome>
        <div>Welcome to React</div>
      </Welcome>
      <hr />
    </>
  )
}

export default Home

Event

import React from 'react'

interface WelcomeProps {
  // 满足单标签，双标签的各种情况
  children?: React.ReactNode
  handleClick: (event: React.MouseEvent<HTMLButtonElement>) => void
}

const Welcome: React.FC<WelcomeProps> = props => {
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    console.log(e.target.value)
  }
  return (
    <>
      <button onClick={props.handleClick}>点击按钮</button>
      <input type="text" onChange={handleChange} />
      {/* 
          将 handleChange 分配给 <select> 时会报类型不匹配的错误
          <select onChange={handleChange}>
            <option value="苹果">苹果</option>
            <option value="香蕉">香蕉</option>
            <option value="葡萄">葡萄</option>
          </select> 
        */}
    </>
  )
}

const Home: React.FC = props => {
  return (
    <>
      <Welcome
        handleClick={function (e) {
          console.log((e.target as HTMLElement).innerHTML)
        }}
      />
    </>
  )
}

export default Home

Style

import React from 'react'

interface WelcomeProps {
  style: React.CSSProperties
}

const Welcome: React.FC<WelcomeProps> = props => {
  return <h1 style={props.style}>Welcome to React</h1>
}

const Home: React.FC = props => {
  return (
    <>
      <Welcome
        style={{
          display: 'block',
          fontSize: 24,
          color: '#f00',
          margin: 0,
          padding: 0
        }}
      />
    </>
  )
}

export default Home

Component

import React from 'react'

interface HeaderProps {
  username: string
  age: number
}

interface WelcomeProps {
  component: React.ComponentType<HeaderProps>
}

const Header: React.FC = props => {
  return <h2>This is Header</h2>
}

const Welcome: React.FC<WelcomeProps> = props => {
  return (
    <>
      <h1>Welcome to React</h1>
      <props.component username="张三" age={18} />
    </>
  )
}

const Home: React.FC = props => {
  return (
    <>
      <Welcome component={Header} />
    </>
  )
}

export default Home

useState

import React, { useState } from 'react'

const Home: React.FC = props => {
  interface Info {
    username: string
    age: number
  }
  const [count, setCount] = useState<number | string>(0)
  const [list, setList] = useState<string[]>([])

  // 调用需要使用可选链 info?.usename  info?.age
  const [info, setInfo] = useState<Info | null>(null)

  // 断言方式能不用则不用
  // const [info, setInfo] = useState<Info>({} as Info)

  return <h1>Hello world!</h1>
}

export default Home

useRef

import React, { useEffect, useRef } from 'react'

const Home: React.FC = props => {
  const myRef = useRef<HTMLButtonElement>(null)

  useEffect(() => {
    // 可选链
    const text = myRef.current?.innerHTML

    // 非空断言，断言方式能不用则不用
    // const text = myRef.current!.innerHTML
    console.log(text)
  }, [])

  // 断言方式能不用则不用
  // const [info, setInfo] = useState<Info>({} as Info)

  return <button ref={myRef}>点击按钮</button>
}

export default Home

React Router

待完善...

Redux Toolkit

待完善...

类组件

import React from 'react'

interface WelcomeProps {
  message: string
}

interface WelcomeState {
  username: string
  age: number
}

class Welcome extends React.Component<WelcomeProps, WelcomeState> {
  state = {
    username: '张三',
    age: 18
  }
  render() {
    return (
      <>
        <div>{this.props.message}</div>
        <div>
          姓名：{this.state.username} 年龄：{this.state.age}
        </div>
      </>
    )
  }
}

const Home: React.FC = props => {
  return <Welcome message="Hello world!" />
}

export default Home