如何将React类组件转换为箭头函数式组件？

转换错误说明 #

你编写的转换后代码存在以下问题：

• 命名冲突：自定义组件名称和从jsme库导入的Jsme组件重名，且原类组件名称为App，应保持导出组件名一致
• 缺失依赖导入：删除了原有的import { Jsme } from 'jsme'语句，导致无法调用第三方Jsme组件
• 方法声明语法错误：logSmiles方法未使用const关键字声明，不符合JS变量声明规范
• 错误使用this关键字：函数式组件不存在类组件的实例this指向，绑定事件时直接传入方法名即可，不需要加this.前缀
• 导出方式不匹配：原类组件为默认导出，转换后改为了命名导出，和原导出逻辑不一致

正确转换后代码 #

import { Jsme } from 'jsme'

const App = () => {
  const logSmiles = (smiles) => {
    console.log(smiles)
  }

  return (
    <div>
      <Jsme 
        height="300px" 
        width="400px" 
        options="oldlook,star"  
        onChange={logSmiles}
      />
    </div>
  )
}

export default App

内容的提问来源于stack exchange，提问作者harsh