如何在 React 中将 Class 组件转换为函数式组件？

Question

我从未使用过 React Class 组件，并且想在某些事件发生时拍摄五彩纸屑。 我对 Class 组件感到困惑。 希望你能帮助解决这个问题。 通过创建箭头函数并删除此关键字进行了尝试。但我不明白如何转换 getInstance() function 甚至为什么它在那里？

import React, { Component } from 'react';
import ReactCanvasConfetti from 'react-canvas-confetti';

export default class Confetti extends Component {
    getInstance = (instance) => {
        // saving the instance to an internal property
        this.confetti = instance;
    }

    onClickDefault = () => {
        // starting the animation
        this.confetti();
    }

    onClickCustom = () => {
        // starting the animation with custom settings
        this.confetti({ particleCount: Math.ceil(Math.random() * 1000), spread: 180 });
    }

    onClickCallback = () => {
        // calling console.log after the animation ends
        this.confetti().then(() => {
            console.log('do something after animation');
        });
    }

    onClickReset = () => {
        // cleaning the canvas
        this.confetti.reset();
    }

    render() {
        const style = {
            position: 'fixed',
            width: '100%',
            height: '100%',
            zIndex: -1

        };
        const stylediv = {
            position: 'fixed',
            width: '100%',
            height: '100%',
            zIndex: 300000

        };

        return (
            <>
                <div style={stylediv}>

                    <ReactCanvasConfetti
                        // set the styles as for a usual react component
                        style={style}
                        // set the class name as for a usual react component
                        className={'yourClassName'}
                        // set the callback for getting instance. The callback will be called after initialization ReactCanvasConfetti component
                        refConfetti={this.getInstance}
                    />

                    <button onClick={this.onClickDefault}>Fire with default</button>
                    <button onClick={this.onClickCustom}>Fire with custom</button>
                    <button onClick={this.onClickCallback}>Fire with callback</button>
                    <button onClick={this.onClickReset}>Reset</button>
                </div>
            </>
        );
    }
}

我正在尝试创建上述 Class 组件的功能组件

Answer 1

import React, { useRef } from 'react';
import ReactCanvasConfetti from 'react-canvas-confetti';

const Confetti = () => {
    const Ref = useRef()
    const getInstance = (instance) => {
      if (Ref.current) {
         Ref.current.confetti = instance
      }
   }
   const onClickDefault = () => {
      Ref.current.confetti();
   }
   const onClickCustom = () => {
      Ref.current.confetti({ particleCount: Math.ceil(Math.random() * 1000), 
      spread: 180 });
   }

   const onClickCallback = () => {
      Ref.current.confetti().then(() => {
          console.log('do something after animation');
      });
   }
   const onClickReset = () => {
      Ref.current.confetti.reset();
   }

   const style = {
    position: 'fixed',
    width: '100%',
    height: '100%',
    zIndex: -1
  };
  const stylediv = {
    position: 'fixed',
    width: '100%',
    height: '100%',
    zIndex: 300000

  };
  return (
    <>
        <div ref={Ref} style={stylediv}>

            <ReactCanvasConfetti
                style={style}
                className={'yourClassName'}
                refConfetti={getInstance}
            />
            <button onClick={onClickDefault}>Fire with default</button>
            <button onClick={onClickCustom}>Fire with custom</button>
            <button onClick={onClickCallback}>Fire with callback</button>
            <button onClick={onClickReset}>Reset</button>
        </div>
    </>
);

} 导出默认五彩纸屑