如何在reactjs中将类组件更改为函数组件？

我正在reactjs中使用Ant设计库

如何将类组件更改为函数组件

import { Accordion, List } from 'antd-mobile';

class AccordionExmple extends React.Component {
  onChange = (key) => {
    console.log(key);
  }
  render() {
    return (
      <div style={{ marginTop: 10, marginBottom: 10 }}>
        <Accordion defaultActiveKey="0" className="my-accordion" onChange={this.onChange}>
          <Accordion.Panel header="Title 1">
            <List className="my-list">
              <List.Item>content 1</List.Item>
              <List.Item>content 2</List.Item>
              <List.Item>content 3</List.Item>
            </List>
          </Accordion.Panel>
          <Accordion.Panel header="Title 2" className="pad">this is panel content2 or other</Accordion.Panel>
          <Accordion.Panel header="Title 3" className="pad">
            text text text text text text text text text text text text text text text
          </Accordion.Panel>
        </Accordion>
      </div>
    );
  }
}

ReactDOM.render(<AccordionExmple />, mountNode);

从“antd mobile”导入{Accordion，List}；
类AccordionXmple扩展了React.Component{
onChange=（键）=>{
控制台日志（键）；
}
render（）{
返回(
内容1
内容2
内容3
这是面板内容2或其他
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
);
}
}
render（，mountNode）；

这是一个代码示例。 我想将此组件用作函数{

const AccordionExmple = () => {
  const onChange = (key) => {
    console.log(key);
  }
 
    return (
      <div style={{ marginTop: 10, marginBottom: 10 }}>
        <Accordion defaultActiveKey="0" className="my-accordion" onChange={onChange}>
          <Accordion.Panel header="Title 1">
            <List className="my-list">
              <List.Item>content 1</List.Item>
              <List.Item>content 2</List.Item>
              <List.Item>content 3</List.Item>
            </List>
          </Accordion.Panel>
          <Accordion.Panel header="Title 2" className="pad">this is panel content2 or other</Accordion.Panel>
          <Accordion.Panel header="Title 3" className="pad">
            text text text text text text text text text text text text text text text
          </Accordion.Panel>
        </Accordion>
      </div>
    );
}

const onChange=（键）=>{ 控制台日志（键）； } 返回( 内容1 内容2 内容3 这是面板内容2或其他 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 ); }