частицы. js не отображаются в проекте reactjs - PullRequest
Новая
       8

частицы. js не отображаются в проекте reactjs

1 голос
/ 06 апреля 2020

Я недавно узнал о Particle. js и хотел использовать его в моем приложении Reactjs.

Я установил его, используя команду, указанную ниже: - 

npm install react-particles-js

И он был успешно установлен. Я проверил его в папке node-modules и обнаружил, что он установлен правильно.

Теперь, приходит приложение. js

import React from 'react';
import Navigation from './components/Navigation'
import {BrowserRouter as Router,Route} from 'react-router-dom'
import * as ROUTES from './constants/routes'
import Landing from './components/Landing'
import Home from './components/Home'
import SignIn from './components/SignIn'
import SignUp from './components/SignUp'
import PasswordForget from './components/PasswordForget';
import Particles from 'react-particles-js';
function App() {
  return (
    <div className="App">
      <Router>
        <Particles></Particles>
         <Navigation />
         <Route exact path={ROUTES.HOME} component={Home} />
         <Route path={ROUTES.SIGN_IN} component={SignIn} />
         <Route path={ROUTES.SIGN_UP} component={SignUp} />
         <Route path={ROUTES.LANDING} component={Landing} />
         <Route path={ROUTES.PASSWORD_FORGET} component={PasswordForget} />
      </Router>
    </div>
  );
}

export default App;

Вот как выглядит вывод

Кроме того, я хочу, чтобы Particles- js работал как правильный фон. Таким образом, это также входит в компоненты Sign-in, Sign-Up и Home.

Пожалуйста, помогите мне. Я попытался добавить параметры внутри, и это все еще не работало.

1 Ответ

2 голосов
/ 06 апреля 2020

Полагаю, ваша страница белая, а система частиц по умолчанию также белая. Я проверил это в codeandbox и убедился, что они не были видны, пока я не изменил цвет фона контейнера, в котором они находились. Вы можете передать реквизиты конфигурации компоненту. Вот простая демонстрация, в которой частицы и ссылки окрашены в черный цвет. 

<Particles
  params={{
    particles: {
      color: {
        value: "#000000"
      },
      line_linked: {
        color: {
          value: "#000000"
        }
      },
      number: {
        value: 50
      },
      size: {
        value: 3
      }
    }
  }}
/>

Edit react-particles-js

README имеет ссылку на красивую конфигурацию * Страница 1010 *, позволяющая экспортировать текущую конфигурацию в виде файла JSON. Очень удобно!

Редактировать Чтобы сделать фон страницы, добавьте абсолютное позиционирование и установите высоту и ширину ( над песочницей обновлено! ): 

<Particles
  style={{ position: "absolute" }}
  height="95%"
  width="95%"
  params={{
    particles: {
      color: {
        value: "#000000"
      },
      line_linked: {
        color: {
          value: "#000000"
        }
      },
      number: {
        value: 50
      },
      size: {
        value: 3
      }
    }
  }}
/>
...