1. Props、State类型校验(tsx)

import { IonItem, IonLabel } from '@ionic/react';
import React, { Component } from 'react';

/**定义函数组件父传子 属性值类型。问号：该属性可有可无
接口的声明不要放在import语句的前面，可能会报错**/
interface Props {
    color?: string,
    history?:any
}
//定义state中键的类型
interface States{
    msg:number,
    age:number
}
/**声明一个类组件 Component<定义props的数据类型,定义state的数据类型>**/
class Ulist extends Component<Props, States> {
    //定义props的默认值
    static defaultProps = {
        color: 'red'
    }
    state = {
        msg: 123,
        age: 10
    }
    render() {
        let {history,color} =this.props
        return (
            <>
                <IonItem lines='full'>
                    <IonLabel onClick={() => { history.push('/home') }} style={{ color: color }}>自定义组件                                                  </IonLabel>
                </IonItem>
            </>
        )
    }
}

export default Ulist

2. 函数组件

import { IonItem, IonLabel } from '@ionic/react';
import React, { useState } from 'react';

//定义props的类型
interface Props{
    color?:string,
    history?:any
}
/**FC:function component 函数组件   声明Ulist为react的函数组件 该函数有只有一个参数props**/
const Ulist:React.FC<Props>=(props)=>{
    /**
    useState相当于类组件的state(状态管理)
    格式 let [状态变量,修改状态的方法]=useState<变量的类型>(变量的值)
    **/
    let [age,setAge]=useState<number>(20);
    let {color}=props
  return(
    <>
        <IonItem lines='full'>
            <IonLabel onClick={()=>{setAge(age+1)}} style={{color:color}}>{age}</IonLabel>
        </IonItem>
    </>
  )
}
//定义props的默认值
Ulist.defaultProps={
    color:'red'
}
export default Ulist

上面的类组件或者函数组件在Mine.tsx的引入

import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, withIonLifeCycle } from '@ionic/react';
import React, { Component } from 'react';
import { RouteComponentProps } from 'react-router';
import Ulist from "../../components/uList"; 
class Mine extends Component<RouteComponentProps> {
    /**
    ionViewWillEnter、ionViewWillLeave、ionViewDidEnter、ionViewDidLeave、componentDidMount、componentDidUpdate
    这几个都是生命周期
    **/
    ionViewWillEnter() {
        console.log('页面进入之前')
    }

    ionViewWillLeave() {
        console.log('页面即将离开')
    }

    ionViewDidEnter() {
        console.log('已进入页面')
    }

    ionViewDidLeave() {
        console.log('页面已离开')
    }
    componentDidMount(){
        // console.log('componentDidMount')
    }
    componentDidUpdate(){
        // console.log('数据更新完毕')
    }
    render() {
        return (
            <IonPage>
                <IonHeader>
                    <IonToolbar>
                        <IonTitle>我的</IonTitle>
                    </IonToolbar>
                </IonHeader>
                <IonContent fullscreen>
                    <IonHeader collapse="condense">
                        <IonToolbar>
                            <IonTitle size="large">我的</IonTitle>
                        </IonToolbar>
                    </IonHeader>
                    <Ulist  color='blue' history={this.props.history}/>
                </IonContent>
            </IonPage>
        )
    }
}
/**高阶组件：在该组件中使用ionic的生命周期**/
export default withIonLifeCycle(Mine)