类组件

state

import React, { Component} from 'react'
//定义state接口
interface StateInter {
    name:string
}

export default class App extends Component<any,StateInter> {
    //定义state时有提示
    state = {
        name:"kerwin"
    }

    change = ()=>{
      // 修改state时提示
      this.setState({
        name:"xiaomnig"
      })
    }
}

props

//定义props接口
interface PropInter {
  name:string
}

//子组件
class Child extends Component<PropInter,any>{
  render(){
      return <div>
          // 提示有name
          child-{this.props.name}
      </div>
  }
}

//父组件
{/* 提示props传入必须有name */}
<Child name="Dan"></Child>

ref

//定义获取ref 传入泛型才能获取innerText提示
spanRef = React.createRef<HTMLSpanElement>()

componentDidMount(){
  //获取ref,使用类型断言as 或者 ?
  console.log(this.spanRef.current?.innerText);
}

//ref
<span ref={this.spanRef}>xxx</span>

函数组件

state

import React ,{useState}from 'react'

function App (){
  //无需定义interface
  const [name, setname] = useState('aa')

  const change = ()=>{
    // 修改时会自动推断类型
    setname('vv')
  }
}

props

import React from 'react'

//定义props接口
interface PropInter {
  name:string
}

//子组件第一种写法
function Child(props:PropInter){
    //提示有name
    return <div>child-{props.name}</div>
}

//子组件第二种写法
// const Child:React.FC<PropInter> = (props)=>{
//   return <div>child-{props.name}</div>
// }

//父组件
{/* 提示props传入必须有name */}
<Child name={"dan"}></Child>

ref

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

function App (){
  //1.null必须 2.定义类型才能获取innerText提示
  const spanRef = useRef<HTMLSpanElement>(null)

  useEffect(() => {
    //获取ref,使用类型断言as 或者 ?
    console.log(spanRef.current?.innerText); 
  }, [])

  //ref
  <span ref={spanRef}>{name}</span>
}

router

@5安装:npm install @types/react-router-dom@5
@6不需要安装, 自带了

定义路由规则

import React, { Component } from 'react'
import {HashRouter,Route,Redirect,Switch} from 'react-router-dom'
import Film from '../views/Film'
import Detail from '../views/Detail'
export default class IndexRouter extends Component {
    render() {
        return (
            <HashRouter>
                <Switch>
                    {/* 提示属性path等的输入 */}
                    <Route path="/film" component={Film}/>
                    <Route path="/detail/:myid" component={Detail}/>
                    <Redirect from="/" to="/film"></Redirect>
                </Switch>
            </HashRouter>
        )
    }
}

路由导航

import React, { Component } from 'react'
import {RouteComponentProps} from 'react-router-dom'

//RouteComponentProps 让this.props.history有提示
export default class Film extends Component<RouteComponentProps,any> {

    componentDidMount() {
      this.props.history.push(`/detail/${111}`)
      console.log(this.props);  
    }
}

props+RouteComponentProps

//父组件的props接口
interface IProps {
  age:number
}

//合并RouteComponentProps
// interface FilmProps  extends IProps,RouteComponentProps{} //1.接口继承
type FilmProps = IProps & RouteComponentProps;//2.类型合并

//作为第一个参数
export default class Film extends Component<FilmProps,any> {
  console.log(this.props.age)
}

参数获取

import React, { Component } from 'react'
import {RouteComponentProps} from 'react-router-dom'
//定义路由参数接口
interface IParam{
  myid:string
}
//<RouteComponentProps<IParam>> 接收路由参数泛型
export default class Detail extends Component<RouteComponentProps<IParam>> {
  componentDidMount(){
    //接收路由参数
    console.log(this.props.match.params.myid)
  }

  render() {
    return (
      <div>Detail-{this.props.match.params.myid}</div>
    )
  }
}

redux

import {legacy_createStore as createStore} from 'redux'

interface IAction {
    type:string,
    payload?:any
}

interface IState{
    isShow:boolean
}
const reducer = (prevState:IState={
    isShow:true
},action:IAction)=>{

    const {type} = action
    const newState = {...prevState}
    switch(type){
        case "show":
            newState.isShow = true
            return newState
        case "hide":
            newState.isShow = false
            return newState
        default :
            return prevState
    }
}

const store = createStore(reducer)

export default store

组件库 ant-mobile

import React, { Component } from 'react'
import {Button,Swiper} from 'antd-mobile'
import { SwiperRef } from 'antd-mobile/es/components/swiper'

export default class Film extends Component {
    //获取ref 指定泛型
    ref= React.createRef<SwiperRef>()

    render() {
        return (
            <div>
                <Swiper loop autoplay ref={this.ref}>
                    <Swiper.Item>111</Swiper.Item>
                    <Swiper.Item>222</Swiper.Item>
                </Swiper>

                {/* 上一个走马灯 */}
                <Button color="danger" onClick={()=>{
                    this.ref.current?.swipePrev()
                }}>上一个</Button>

                <Button color="primary" onClick={()=>{
                    (this.ref.current as SwiperRef).swipeNext()
                }}>下一个</Button>

            </div>
        )
    }
}