React 类组件

import React from "react"
class Cpn extends React.Component {
  render() {
    return <li>组件内容</li>
  }
}
export default Cpn

1. 类名称也必须以大写字母开头

2. 类组件应该继承 React.Component 父类，从而使用父类中提供的方法或属性

3. 类组件必须提供 render 方法render 方法必须有返回值，表示该组件的 UI 结构

import React from "react"
class Cpn extends React.Component {
  fun = () => {
    console.log("函数执行了")
  }
  render() {
    return (
      <span onClick={this.fun}>显示内容</span>
    )
  }
}
export default Cpn

 事件绑定

import React from "react"
class Cpn extends React.Component {
  fun = (e) => {
    console.log("函数执行了")
    console.log(e)
  }
  render() {
    return <div onClick={this.fun}>显示内容</div>
  }
}
export default Cpn

 获取额外参数 

import React from "react";
class Cpn extends React.Component {
  state = {
    num: 123,
  };
  fun(e, num) {
    console.log("执行函数");
    console.log(e);
    console.log(num);
  }
  render() {
    return <div onClick={(e) => this.fun(e, this.state.num)}>显示</div>;
  }
}
export default Cpn;