javascript - 将 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。我希望这是足够的信息。如果您需要其他任何东西，请告诉我。

标签： javascriptreactjsnextjs