import React, { useState } from 'react'; import { Sidebar, Toast } from 'react-vant'; export default () => { const [active, setActive] = useState(0); return ( <Sidebar value={active} onChange={(v) => { setActive(v); Toast.info(`内容区 ${v + 1}`); }} > <Sidebar.Item contentStyle={{ backgroundColor: '#fff', padding: '18px 10px' }} title="内容1"> 我是内容区1 </Sidebar.Item> <Sidebar.Item contentStyle={{ backgroundColor: '#fff', padding: '18px 10px' }} title="内容2"> 我是内容区2 </Sidebar.Item> <Sidebar.Item contentStyle={{ backgroundColor: '#fff', padding: '18px 10px' }} title="内容3"> 我是内容区3 </Sidebar.Item> </Sidebar> ); };将如上函数改为类组件写法

可以将函数组件中的 useState 改为类组件中的 state 和 setState 方法来实现：

import React, { Component } from 'react';
import { Sidebar, Toast } from 'react-vant';

class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      active: 0
    };
  }

  render() {
    return (
      <Sidebar
        value={this.state.active}
        onChange={(v) => {
          this.setState({ active: v });
          Toast.info(`内容区 ${v + 1}`);
        }}
      >
        <Sidebar.Item
          contentStyle={{ backgroundColor: '#fff', padding: '18px 10px' }}
          title="内容1"
        >
          我是内容区1
        </Sidebar.Item>
        <Sidebar.Item
          contentStyle={{ backgroundColor: '#fff', padding: '18px 10px' }}
          title="内容2"
        >
          我是内容区2
        </Sidebar.Item>
        <Sidebar.Item
          contentStyle={{ backgroundColor: '#fff', padding: '18px 10px' }}
          title="内容3"
        >
          我是内容区3
        </Sidebar.Item>
      </Sidebar>
    );
  }
}

export default Example;

在类组件中，我们在构造函数中初始化状态，使用 this.state 来获取当前状态值，使用 this.setState 来修改状态值，并在 render 方法中返回 JSX。注意在类组件中，事件处理函数需要使用箭头函数或在构造函数中绑定 this，以确保 this 指向组件实例。