如何将React类组件转换为函数组件（礼花组件示例）

核心概念说明 #

原来的getInstance函数作用是获取ReactCanvasConfetti组件的实例对象，并把它存在类组件的实例属性this.confetti里，这样后续点击按钮时就能调用实例的方法（比如触发动画、重置画布）。

在函数组件中，我们用useRef钩子来替代类组件的实例属性——useRef可以存储可变值，且值变化不会触发组件重渲染，刚好适合保存这个confetti实例。

完整函数组件代码 #

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

export default function Confetti() {
  // 创建ref存储confetti实例
  const confettiRef = useRef(null);

  // 获取实例的回调，替代原来的getInstance
  const getInstance = (instance) => {
    confettiRef.current = instance;
  };

  const onClickDefault = () => {
    // 调用实例方法触发默认动画
    confettiRef.current?.();
  };

  const onClickCustom = () => {
    // 传入自定义配置触发动画
    confettiRef.current?.({ 
      particleCount: Math.ceil(Math.random() * 1000), 
      spread: 180 
    });
  };

  const onClickCallback = () => {
    // 动画结束后执行回调
    confettiRef.current?.().then(() => {
      console.log('动画结束后做点什么');
    });
  };

  const onClickReset = () => {
    // 重置画布
    confettiRef.current?.reset();
  };

  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
          style={style}
          className={'yourClassName'}
          // 传入获取实例的回调
          refConfetti={getInstance}
        />

        <button onClick={onClickDefault}>触发默认动画</button>
        <button onClick={onClickCustom}>触发自定义动画</button>
        <button onClick={onClickCallback}>触发动画并执行回调</button>
        <button onClick={onClickReset}>重置画布</button>
      </div>
    </>
  );
}

关键改动点 #

• 用useRef创建confettiRef替代类组件的this.confetti，存储confetti实例
• 将原来的类方法改成函数组件内的普通函数，直接通过confettiRef.current调用实例方法
• 给调用实例方法的地方加上可选链操作符?.，避免组件初始化完成前调用导致的报错（因为confettiRef.current在组件初始化完成前是null）

内容的提问来源于stack exchange，提问作者Shankaja Aroshana