- 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
- 函数组件
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)
