react class组件写法

当使用 React 的 Class 组件时，可以按照以下方式编写：

import React, { Component } from 'react';

class MyClassComponent extends Component {

  constructor(props) {

    super(props);

    // 在构造函数中初始化状态（state）或绑定方法

    this.state = {

      // 初始化状态

      counter: 0

    };

   

    // 为自定义方法绑定 this

    this.handleClick = this.handleClick.bind(this);

  }

  // 自定义方法

  handleClick() {

    // 更新状态

    this.setState({ counter: this.state.counter + 1 });

  }

  // 渲染方法

  render() {

    return (

      <div>

        <h1>Class Component</h1>

        <p>Counter: {this.state.counter}</p>

        <button onClick={this.handleClick}>Increment</button>

      </div>

    );

  }

}

export default MyClassComponent;

在上述代码中，首先引入 React 和 Component。然后定义一个继承自 Component 的类组件 MyClassComponent。在构造函数中，可以初始化状态（state）和绑定方法。状态可以通过 this.state 访问，并且可以使用 this.setState() 来更新状态。

在示例中，我们有一个名为 counter 的状态，初始值为 0。然后，我们定义了一个名为 handleClick 的自定义方法，它在按钮点击时会将 counter 的值加一，并通过 this.setState() 更新状态。

在渲染方法 render() 中，我们使用 JSX 语法来定义组件的外观。在这个例子中，渲染了一个标题、一个显示计数器的段落和一个点击按钮。在按钮上，我们将 this.handleClick 方法作为 onClick 事件的处理函数。

最后，通过 export default 将 MyClassComponent 导出，以便在其他组件中使用它。