import { ComponentClass } from 'react' import { connect } from '@tarojs/redux' import { getTempList } from '@/actions/asyncCounter' import Taro, { Component, Config } from '@tarojs/taro' import TempItem from './conpoments/temp_item' import { View, Input, ScrollView } from '@tarojs/components' import './scss/index.scss' type PageStateProps = { list: any[] count: number } type PageDispatchProps = { getTempListData: (page: number) => void } type PageOwnProps = {} type PageState = { page: number } type IProps = PageStateProps & PageDispatchProps & PageOwnProps interface Tempaltes { props: IProps state: PageState } @connect( ({ counter }) => { const { list, count } = counter.tempData return { list, count } }, dispatch => ({ getTempListData(page: number) { dispatch(getTempList(page)) } }) ) class Tempaltes extends Component { config: Config = { navigationBarTitleText: '', navigationStyle: process.env.TARO_ENV === 'rn' ? 'custom' : 'default' } constructor(props) { super(props) this.state = { page: 1 } } async componentWillMount() { this.getData() } getData() { const { page } = this.state this.props.getTempListData(page) } shouldComponentUpdate(nextProps: IProps) { const { list } = this.props const { list: _list } = nextProps return _list !== list } render() { const { list } = this.props return ( <View className="temp"> <View className="temp-search-bar"> <Input className="temp-search-bar-search" placeholder="请输入搜索关键词" /> </View> <View className="temp-content"> <ScrollView className="temp-content-scroll" scrollY> <View className="temp-content-scroll-list"> {list.map(item => ( <TempItem {...item} key={item.templateId} /> ))} </View> </ScrollView> </View> </View> ) } } export default Tempaltes as ComponentClass<PageOwnProps, PageState>