如何将React类组件转换为函数组件？constructor部分转换咨询

你示例中的constructor里只是定义了一个固定不变的静态配置数组，转函数式组件时不需要额外的Hook，直接在组件内部声明常量即可。

以下是完整的转换后代码：

import { enableRipple } from '@syncfusion/ej2-base';
import { DropDownButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);

// 转换后的函数式组件
function App() {
  // 替换原constructor中的this.items定义，无需使用this
  const items = [
    { text: 'Display Settings' },
    { text: 'System Settings' },
    { text: 'Additional Settings' }
  ];

  return (
    <div>
      <DropDownButtonComponent items={items} iconCss='e-icons e-image' cssClass='e-caret-hide'/>
    </div>
  );
}

ReactDom.render(<App />, document.getElementById('button'));

如果后续需要适配不同的业务场景，可按需求选择对应方案：

• 如果items需要动态修改且修改后要触发组件重新渲染，使用useState存储：

  const [items, setItems] = useState([
    // 初始数组内容
  ]);
  // 修改时调用setItems传入新数组即可
  

• 如果items需要存储可变值但修改不需要触发组件重新渲染，使用useRef存储：

  const itemsRef = useRef([
    // 初始数组内容
  ]);
  // 取值/修改时操作 itemsRef.current 即可
  

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