如何将 class 组件转换为功能组件？

Question

我有一个基于 class 的组件，我想转换为基于功能的组件，我的代码如下：

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);
// To render DropDownButton.
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.items = [
            {
                text: 'Display Settings'
            },
            {
                text: 'System Settings'
            },
            {
                text: 'Additional Settings'
            }
        ];
    }
    render() {
        return (<div>
        <DropDownButtonComponent items={this.items} iconCss='e-icons e-image' cssClass='e-caret-hide'/>
      </div>);
    }
}
ReactDom.render(<App />, document.getElementById('button'));

但是我不知道如何转换下面的这部分，有什么想法吗？

  constructor() {
        super(...arguments);
        this.items = [
            {
                text: 'Display Settings'
            },
            {
                text: 'System Settings'
            },
            {
                text: 'Additional Settings'
            }
        ];
    }

Answer 1

这可以转换为 functional component，如下所示：

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);

const App = () => {
  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'));