How to use the @tarojs/taro.Component function in @tarojs/taro

import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'
import { AtCountdown } from 'taro-ui'
import DocsHeader from '../../components/doc-header'
import './index.scss'

export default class CountDownPage extends Taro.Component {
  config = {
    navigationBarTitleText: 'Taro UI'
  }

  onTimeUp () {
    Taro.showToast({
      title: '时间到',
      icon: 'success',
      duration: 2000
    })
  }

  render () {
    return (

import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'
import { AtTimeline } from 'taro-ui'
import DocsHeader from '../../components/doc-header'
import './index.scss'

export default class TimelinePage extends Taro.Component {
  config = {
    navigationBarTitleText: 'Taro UI'
  }

  render () {
    return (

import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'
import { AtActivityIndicator } from 'taro-ui'

import DocsHeader from '../../components/doc-header'
import './index.scss'

export default class ActivityIndicatorPage extends Taro.Component {
  config = {
    navigationBarTitleText: 'Taro UI'
  }

  constructor () {
    super(...arguments)
    this.atButton = ''
    this.state = {}
  }

  render () {
    return (

import Taro from '@tarojs/taro';
import { View } from '@tarojs/components';

import { debugAdd } from '../../utils/debug';

import './index.scss';

export default class PageComponent extends Taro.Component {
  config = {
    navigationBarTitleText: '跳转的页面',
  }

  constructor(props) {
    super(props);
    debugAdd('jump', this);
    this.state = {};
  }

  componentDidMount = () => {
  }

  componentWillReceiveProps = (nextProps) => {
    console.log(this.props, nextProps);
  }

import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'
import { AtCard, AtIcon } from 'taro-ui'
import DocsHeader from '../../components/doc-header'
import './index.scss'

export default class CardPage extends Taro.Component {
  config = {
    navigationBarTitleText: 'Taro UI'
  }

  handleClick = () => {
    console.log('Card handleClick')
  }

  render () {
    return (

import { delayQuerySelector } from '../../../common/utils'

const ANIMTE_DURATION: number = 300

const defaultProps: Partial = {
  marks: [],
  selectedDate: {
    end: Date.now(),
    start: Date.now()
  },
  format: 'YYYY-MM-DD',
  generateDate: Date.now()
}

export default class AtCalendarBody extends Taro.Component<
  Props,
  Readonly
  > {
  static options = { addGlobalClass: true }
  static defaultProps: Partial = defaultProps

  private changeCount: number = 0
  private currentSwiperIndex: number = 1
  private startX: number = 0
  private swipeStartPoint: number = 0
  private isPreMonth: boolean = false
  private maxWidth: number = 0
  private isTouching: boolean = false

  private generateFunc: (
    generateDate: number,

import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'
import { AtNavBar } from 'taro-ui'
import DocsHeader from '../../components/doc-header'
import './index.scss'

export default class Index extends Taro.Component {
  config = {
    navigationBarTitleText: 'Taro UI'
  }
  handleClick (title) {
    Taro.showToast({
      'title': title,
      'duration': 2000,
      'icon': 'success'
    })
  }
  clickReturn () {
    Taro.showToast({
      'title': '返回',
      'duration': 2000,
      'icon': 'success'
    })

import Taro from '@tarojs/taro'
import { View, Form } from '@tarojs/components'

import { AtButton, AtForm } from 'taro-ui'
import DocsHeader from '../../components/doc-header'

import './index.scss'

export default class ButtonPage extends Taro.Component {
  config = {
    navigationBarTitleText: 'Taro UI'
  }

  state = {
    isWEAPP: Taro.getEnv() === Taro.ENV_TYPE.WEAPP,
    isALIPAY: Taro.getEnv() === Taro.ENV_TYPE.ALIPAY,
  }

  onButtonClick () {
    const content = [...arguments].find(item => typeof item === 'string')
    const ENV = Taro.getEnv()
    if (ENV === 'WEAPP') Taro.showModal({ content: content || '您点击了！', showCancel: false })
    else if (ENV === 'WEB') alert(content || '您点击了！')
  }

import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'
import { AtTabBar } from 'taro-ui'
import DocsHeader from '../../components/doc-header'
import './index.scss'

export default class Index extends Taro.Component {
  config = {
    navigationBarTitleText: 'Taro UI'
  }

  constructor () {
    super(...arguments)
    this.state = {
      current1: 0,
      current2: 0,
      current3: 0,
      current4: 0,
      current5: 0,
    }
  }

  handleClick (num, value) {

import Taro, {ComponentClass} from '@tarojs/taro'
import {AtActivityIndicator} from "taro-ui";

type pageProps = {
  content: string,
  mode?: any,
  color: string
}

/**
 * 页面加载器
 */
class Loading extends Taro.Component {

  static defaultProps = {
    content: '加载中...',
    mode: 'center',
    color:'#eb6e48'
  };

  render() {
    const { color, content, mode } = this.props;

    return (