从Classcomponent更改为functional component

Question

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

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 => 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

Answer 2

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 3

尝试在VS代码中使用此组件

Glean