Преобразование Vanilla ES6 для работы с React - PullRequest
Новая
       18

Преобразование Vanilla ES6 для работы с React

0 голосов
/ 27 июня 2018

У меня есть веб-сайт, который был построен с Джекилом и Гулпом. Я пытаюсь перевести его в React, используя стилизованные компоненты через next.js .

Моя проблема - импортировать все мои оригинальные js и создавать компоненты из модулей.

Вот пример. У меня есть этот модуль, написанный на es6, как мне сделать это через React? 

const Universe = () => {
const randomNum = (low, high) => {
  const r = Math.floor(Math.random() * (high - low + 1)) + low;
  return r;
};

const shootingStars = name => {
  const stars = document.querySelectorAll(name);
  const starsArray = [...stars];
  setInterval(() => {
    starsArray.forEach(el => {
        el.style.cssText = `transform: rotate(${randomNum(
          0,
          180
        )}deg) translateY(${randomNum(0, 200)}px)`;
      });
    }, 9000);
  };
  shootingStars('.shooting-star');
  shootingStars('.shooting-star-right');
};

export default Universe;

Вот как выглядит мой файл index.js: 

import SiteHeader from '../components/header/Header';
import Universe from '../components/universe/ShootingStars';

export default () => (
  <div>
    <SiteHeader />
    <div className="shooting-star" />
    <div className="shooting-star-right" />
    <Universe />
  </div>
);

Я получаю ReferenceError: document is not defined. Я надеюсь, что это достаточно информации. Пожалуйста, дайте мне знать, если вам нужно что-нибудь еще.

...