Как преобразовать компонент класса в функциональный компонент в React?

Я никогда не использовал React Class Components And Want, чтобы стрелять конфетти, когда происходило какое-то событие. Я запутался с компонентом класса. Надеюсь, вы можете помочь с этим вопросом. попытался создать функции стрелок и удалить это ключевое слово. Но я не могу понять, как преобразовать функцию getInstance (), даже почему она там?

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.info after the animation ends
        this.confetti().then(() => {
            console.info('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>
            </>
        );
    }
}

Я пытаюсь создать функциональный компонент вышеуказанного компонента класса.

getInstance — это Callback Ref.

— 12.01.2023 16:00

reactjs react-hooks

10.01.2023 17:40

От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React

Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...

Революционная веб-разработка ServiceNow

В быстро развивающемся мире веб-разработки ServiceNow для достижения успеха крайне важно оставаться на вершине последних тенденций и технологий. По...

Как добавить SEO(Search Engine Optimization) в наше веб-приложение и как это работает?

Заголовок веб-страницы играет наиболее важную роль в SEO, он помогает поисковой системе понять, о чем ваш сайт.

Руководство для начинающих по веб-разработке на React.js

Веб-разработка - это захватывающая и постоянно меняющаяся область, которая постоянно развивается благодаря новым технологиям и тенденциям. Одним из...

Разница между Angular и React

React и AngularJS - это два самых популярных фреймворка для веб-разработки. Оба фреймворка имеют свои уникальные особенности и преимущества, которые...

Оптимизация React Context шаг за шагом в 4 примерах

При использовании компонентов React в сочетании с Context вы можете оптимизировать рендеринг, обернув ваш компонент React в React.memo сразу после...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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.info('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>
    </>
);

} экспорт конфетти по умолчанию

12.01.2023 18:33