从类组件更改为功能组件

Question

我有一个小问题，我使用 PrimeReact 来开发我的东西，但有时从类组件到功能组件的变化非常烦人，所以我想将这个组件更改为功能组件，有人可以帮助我吗？

import React, { Component, useState } from 'react';
import { OverlayPanel } from 'primereact/overlaypanel';
import { Button } from 'primereact/button';


class Datas extends React.Component {
    render() {
        return (
            <div className='content-section implementation'>
                
                <Button
                    type='button'
                    icon='pi pi-search'
                    // label='Toggle'
                    onClick={e => this.op.toggle(e)}
                />
                <OverlayPanel ref={el => (this.op = el)}>
                <Button
                    type='button'
                    icon='pi pi-search'
                    // label='Toggle'
                    onClick={e => (e)}
                />
                
                </OverlayPanel>
            </div>
        );
    }
}


export default Datas

Answer 1

import React, { Component, useState } from 'react';
import { OverlayPanel } from 'primereact/overlaypanel';
import { Button } from 'primereact/button';


 const Datas = () => {
    return (
        <div className='content-section implementation'>
            
            <Button
                type='button'
                icon='pi pi-search'
                // label='Toggle'
                onClick={e => this.op.toggle(e)}
            />
            <OverlayPanel ref={el => (this.op = el)}>
            <Button
                type='button'
                icon='pi pi-search'
                // label='Toggle'
                onClick={e => (e)}
            />
            
            </OverlayPanel>
        </div>
    );
}

 export default Datas

Answer 2

尝试在VS code中使用这个组件

Glean

Answer 3

对于像这样的组件，只有一个渲染方法转换为功能组件就是这样。

import React, { Component, useState } from 'react';
import { OverlayPanel } from 'primereact/overlaypanel';
import { Button } from 'primereact/button';


const Datas = () => {
    return (
        <div className='content-section implementation'>
            
            <Button
                type='button'
                icon='pi pi-search'
                // label='Toggle'
                onClick={e => op.toggle(e)}
            />
            <OverlayPanel ref={el => (op = el)}>
            <Button
                type='button'
                icon='pi pi-search'
                // label='Toggle'
                onClick={e => (e)}
            />
            
            </OverlayPanel>
        </div>
    );
}


export default Datas

从类组件更改为功能组件

change from Classcomponent to functional component

reactjs

primereact