组件化开发-03-类组件用法——必须使用render方法渲染模板& render方法名称必须固定

类组件用法——必须使用render方法渲染模板& render方法名称必须固定

基于类定义组件

• 类组件必须使用render方法渲染模板；render方法名称必须固定
• 类组件与函数组件的唯一差异：类组件可以拥有自己的状态（数据）
• 类组件也是通过props获取父组件传递的数据

class TestClass extends React.Component {
  // 类组件必须使用render方法渲染模板
  // render方法名称必须固定
  render () {
    // let info = this.props.info
    let {info} = this.props
    return (
      <div>类组件:{info}</div>
    )
  }
}

实例

第一步：src下新建文件夹components，下面新建03.js

/*
  基于类的组件定义

  定义类组件必须继承 React.Component 父类
  类组件渲染模板必须使用render方法
*/
import React from 'react'

// function Welcome () {
//   return (
//     <div>函数组件</div>
//   )
// }

class Welcome extends React.Component {
  render () {
    // 类组件也是通过props获取父组件传递的数据
    let msg = this.props.msg
    return (
      <div>类组件:{msg}</div>
    )
  }
}

export default Welcome

第二步：App.js中进行引入

import React from 'react';
import './App.css';
import Welcome from './component/03-基于类的组件定义'

function App () {
  return (
    <div>
      <Welcome msg='nihao'/>
    </div>
  )
}

export default App;

npm run start启动项目，显示