0

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

3 回答 3

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
于 2020-11-19T13:29:38.750 回答
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
于 2020-11-19T13:28:40.467 回答
1

尝试在 VS 代码中使用这个组件

收集

于 2020-11-19T13:29:13.180 回答