Частицы не отображаются в react-js

Это мой код в Particle.js

import React from "react";
import Particles from "react-tsparticles";

function Particle() {
  return (
    <Particles
      id = "tsparticles"
      params = {{
        particles: {
          number: {
            value: 160,
            density: {
              enable: true,
              value_area: 1500,
            },
          },
          line_linked: {
            enable: false,
            opacity: 0.03,
          },
          move: {
            direction: "right",
            speed: 0.05,
          },
          size: {
            value: 1,
          },
          opacity: {
            anim: {
              enable: true,
              speed: 1,
              opacity_min: 0.05,
            },
          },
        },
        interactivity: {
          events: {
            onclick: {
              enable: true,
              mode: "push",
            },
          },
          modes: {
            push: {
              particles_nb: 1,
            },
          },
        },
        retina_detect: true,
      }}
    />
  );
}

export default Particle;

и я вызываю частицу в Home.js

import Particle from "../Particle";
import Button from 'react-bootstrap/Button';

function Home() {

  return (
    <div className = "mt-5">
        <Particle/>
        <Button href = "" target = "_blank" className = "register-btn-inner" size = "lg">
          Register
        </Button>   
      </div>
    );
  }
  
  export default Home;

Я проверил много одинаковых вопросов, таких как Particle.js, не отображающийся в проекте reactjs и Particle.js, не отображающий частицы на веб-сайте ReactJS но решения мне совсем не помогают. Я много искал, но не понимаю своей ошибки. почему Particle не работает? Я также установил библиотеки tsparticles и react-tsparticles.

Можете ли вы отредактировать пост, включив в него более полный минимальный воспроизводимый пример , достаточный для того, чтобы мы могли воспроизвести какие-либо проблемы? Не могли бы вы также создать работающую демонстрацию codeandbox, которая воспроизводит проблему, чтобы мы могли проверить ее вживую? Также уточните, пожалуйста, подробнее, что именно означает «частицы не появляются». Есть ли ошибки? Вы проверили DOM, чтобы увидеть, что отображается? Установленные версии пакетов? И т.п.

— 07.12.2022 08:29

Вы видели какие-либо ошибки в консоли? Если да, прикрепите их к вопросу

— 07.12.2022 11:52

javascript reactjs particles particles.js

07.12.2022 08:22

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

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

Ответы 1

Ответ принят как подходящий

Вам не хватает атрибута init в компоненте Particles. Это видно и в документации здесь

Это пример документации:

import { useCallback } from "react";
import Particles from "react-particles";
import { loadFull } from "tsparticles";

const App = () => {
    const particlesInit = useCallback(async engine => {
        console.info(engine);
        // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
        // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
        // starting from v2 you can add only the features you need reducing the bundle size
        await loadFull(engine);
    }, []);

    const particlesLoaded = useCallback(async container => {
        await console.info(container);
    }, []);

    return (
        <Particles
            id = "tsparticles"
            init = {particlesInit}
            loaded = {particlesLoaded}
            options = {{
                background: {
                    color: {
                        value: "#0d47a1",
                    },
                },
                fpsLimit: 120,
                interactivity: {
                    events: {
                        onClick: {
                            enable: true,
                            mode: "push",
                        },
                        onHover: {
                            enable: true,
                            mode: "repulse",
                        },
                        resize: true,
                    },
                    modes: {
                        push: {
                            quantity: 4,
                        },
                        repulse: {
                            distance: 200,
                            duration: 0.4,
                        },
                    },
                },
                particles: {
                    color: {
                        value: "#ffffff",
                    },
                    links: {
                        color: "#ffffff",
                        distance: 150,
                        enable: true,
                        opacity: 0.5,
                        width: 1,
                    },
                    collisions: {
                        enable: true,
                    },
                    move: {
                        directions: "none",
                        enable: true,
                        outModes: {
                            default: "bounce",
                        },
                        random: false,
                        speed: 6,
                        straight: false,
                    },
                    number: {
                        density: {
                            enable: true,
                            area: 800,
                        },
                        value: 80,
                    },
                    opacity: {
                        value: 0.5,
                    },
                    shape: {
                        type: "circle",
                    },
                    size: {
                        value: { min: 1, max: 5 },
                    },
                },
                detectRetina: true,
            }}
        />
    );
};

09.12.2022 19:26

Другие вопросы по теме

Интерфейс приложения React-Nodejs не загружается с помощью docker-compose up

Каково определение первого рендера в React Native?

Реагирующая таблица не будет загружать данные из json

Как сгруппировать массив кинообъектов по жанру?

«useSWR вызывается в функции, которая не является ни компонентом функции React, ни пользовательской функцией React Hook» Ошибка

Контракт не является nft drop Thirdweb

Использование массива ссылок вместо одной ссылки

Передача функции, которая возвращается к оператору ИЛИ, чему-то другому в React

Условная ширина и многоточие не работают со стилизованным компонентом - React.js

Как сделать вкладки с вложенной маршрутизацией React Router v6?

Частицы не отображаются в react-js

Ответы 1

Другие вопросы по теме

Похожие вопросы