初体验react+taro+ts 小程序 typescript

项目中突然来了个小程序，心想终于可以敲敲不同类型的项目了，这里心情还是好的~~~

打开项目之后，发现文件后缀有点不同，嘿！典型的ts结构（yue了），等等，竟然是react+ts+taro，
可taro是什么东西？？

不多说了，直接上点代码瞧瞧：

头部：

import { Component, PropsWithChildren } from "react";
---这里view相当于常用的div
import { View} from "@tarojs/components";
---这里是taroui里的组件，用到哪些就引入哪些，还是对性能有点好处呢
import { AtTabs, AtTabsPane } from 'taro-ui'

中间儿：

---fireMonitor 是我的文件夹名字，我们的变量可以放到state，我想与vue中的data类似
export default class fireMonitor extends Component<PropsWithChildren> {
  state = {
    monitorList: [],
    // 记录当前tab标签
    current: 0,
    // 催办数据列表
    hastenArr:[{
      title:'江夏区东关街道古基金港武汉光谷企业天地',
      time:'2022-11-04 13:58:17',
      status:'',
      type:'火场核查'
    },{
      title:'事件清单',
      time:'2022-11-04 13:58:17',
      status:'催办123',
      type:'巡护管理'
    },]
  };

接来下就是render函数了：这里要说的就是我们没必要把所有dom都写到render里，
就比如下边的this.hastenWork()函数，这个函数里也是放的dom

 render () {
    const tabList = [{ title: '催办' }, { title: '通知' }]
    return (
      <View className='home'>
        <AtTabs current={this.state.current} tabList={tabList} onClick={this.handleClick.bind(this)}> 
          <AtTabsPane current={this.state.current} index={0} >
            <View style='padding: 10px;background-color: #FAFBFC;' >{this.hastenWork()} </View>
          </AtTabsPane>
          <AtTabsPane current={this.state.current} index={1}>
            <View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;'>标签页二的内容</View>
          </AtTabsPane>
        </AtTabs>
      </View>
    )
  }

hastenWork()函数都有啥：の大概就是这样子~~，相当于把下边代码嵌套在render里边了，这样做可以是层次分明，
可以知道每一部分代表什么dom含义

 private hastenWork(){
    return this.state.hastenArr.map((item: any) => {
      return (
        <view className="con">
          <view className="content_sty">
            <view className="con_left">
              <view className="title_sty">{item.title}</view>
              <view className="time_sty">{item.time}</view>
              <view className="handle_sty">{item.status}</view>
            </view>
            <view className="con_right">{item.type}</view>
          </view>
        </view>
      )
    })
  }

刚接触有点难下手，不过在借鉴其他人的代码后可以摸索着来写！！