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

Posted 2023-03-16

【中文标题】如何将类组件转换为功能组件？

【英文标题】：How can I convert class component to functional component?

【发布时间】：2021-11-07 01:40:31

【问题描述】：

我有一个基于类的组件，我想转换为基于函数的组件，我的代码如下：

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'
            
        ];
    

【参考方案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'));

【讨论】：

好的，如果有帮助请告诉我

它说'items'没有定义no-undef

你忘了把const放在items之前吗？