Taro+TypeScript - state 和 props声明使用

分手后的思念是犯贱 2021-09-29 04:10 424阅读 0赞

import { ComponentType } from 'react'
    import Taro, { Component, Config } from '@tarojs/taro'
    import { View, Button, Text } from '@tarojs/components'
    import { observer, inject } from '@tarojs/mobx'
    
    import './index.scss'
    // 声明props类型
    type PropsType = {
      counter: {
        counter: number,
        increment: Function,
        decrement: Function,
        incrementAsync: Function
      },
      address: string
    }
    // 声明state类型
    type StateType = {
      name: string,
      age: number
    }
    // 声明接口
    interface Index {
      props: PropsType,
      state: StateType
    }
    // mobx注入
    @inject('counter')
    @observer
    class Index extends Component {
      // state的初始化在constructor中
      constructor (props) {
        super(props)
        // 初始化
        this.state = {
          name: 'Test',
          age: 18
        }
      }
    
      config: Config = {
        navigationBarTitleText: '首页'
      }
    
      componentWillMount () { }
      // mobx数据改变进行渲染函数（）
      componentWillReact () {
    	console.log('数据发生变化')
      }
    
      componentDidMount () { }
    
      componentWillUnmount () { }
    
      componentDidShow () { }
    
      componentDidHide () { }
    
      increment = () => {
        const { counter } = this.props
        counter.increment()
      }
    
      decrement = () => {
        const { counter } = this.props
        counter.decrement()
      }
    
      incrementAsync = () => {
        const { counter } = this.props
        counter.incrementAsync()
      }
      stateChange () {
        this.setState({
          name: 'wang'
        })
      }
    
      render () {
        const { counter: { counter } } = this.props
        const { name } = this.state
        return (
          <View className='index'>
            <Button onClick={this.increment}>+</Button>
            <Button onClick={this.decrement}>-</Button>
            <Button onClick={this.incrementAsync}>Add Async</Button>
            <Text>{counter}</Text>
            <Button onClick={this.stateChange}>修改姓名</Button>
            <Text>{name}</Text>
          </View>
        )
      }
    }
    export default Index  as ComponentType