React中的类组件

58 阅读1分钟

类组件的基本定义

import {Component} from 'react'
import {View} from '@tarojs/components'
import HomeHand from './../../module/home-hand'
import HomeNav from './../../module/home-nav'
import './index.scss'


export default class Index extends Component {

  render() {
    return (
      <View className='home'>
        <HomeHand></HomeHand>
        <HomeNav></HomeNav>
      </View>
    )
  }
}

子类定义默认值

import { Component } from 'react'
import Taro from '@tarojs/taro'
import { View, Text } from '@tarojs/components'

import './index.scss'

type TProps = {
    title:string
    onchildClick?:()=>void
}

class Card extends Component<TProps> {
    static defaultProps = {
        title:''
    }
    render() {
        return (
            <View className="card">
                <View className="card-container">
                    <View className="card-cont">
                        <View className="card-header">
                            <View className="card-header-icon iconfont iconfenleiyingyong"></View>
                            <View className="card-header-title">{this.props.title}</View>
                            <View className="card-header-btn"onClick={() => {this.props.onchildClick}}>编辑</View>
                        </View>
                        <View className="card-content">
                            {this.props.children}
                        </View>
                    </View>
                </View>
            </View>
        )
    }
}

export default Card