从类组件更改为功能组件答案

【问题标题】：change from Classcomponent to functional component从类组件更改为功能组件
【发布时间】：2021-03-02 21:00:31
【问题描述】：

我有一个小问题，我使用 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

【问题讨论】：

标签： reactjs primereact

【解决方案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

【讨论】：

this. 内部功能组件？
你的代码中的 this.op 是什么？可以分享一下构造函数属性吗？

【解决方案2】：

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

Glean

【讨论】：

【解决方案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

【讨论】：

this. 内部功能组件？
'op' 没有定义.. 所以在道具中我们必须放 ({op}) 否则无论如何都不会工作谢谢！！