将Vanilla ES6转换为可与React一起使用

Question

我有一个网站，它是由Jekyll和Gulp建立的。我正在尝试通过next.js使用样式化的组件将其过渡到React。

我的问题是导入所有原始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。我希望这是足够的信息。如果您还有其他需要，请告诉我。