在 React.js 中实现 JS 库

Question

我正在使用一个名为 nextparticle 的 javascript 库。我正在尝试在 React.js 中实现它。我到处看了看并尝试了所有选项，但我无法让它工作。我试过了。

import React, {Component } from 'react'
import { NextParticle } from '../nextparticle';
import {Helmet} from "react-helmet";

    const Background = () => (
    <div>
        <Helmet>
            <script src="../nextparticle.js" type="text/javascript" />
        </Helmet>
        <NextParticle />
        </div>
  
);

这是我得到的错误

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

我也试过了import NextParticle from '../nextparticle'; 也不起作用。我已经试了好几天了。我应该传递特殊参数才能使其工作。我尝试输入的任何参数都不起作用。它应该是这样的

   <img
  id="logo"
  src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/23500/nextparticle.png"
/>

    <script src="https://nextparticle.nextco.de/nextparticle.min.js"></script>
    <script>
      nextParticle = new NextParticle({
  image: document.all.logo,
  addTimestamp: true,
  width: window.innerWidth,
  height: window.innerHeight,
  initPosition: 'none',
  initDirection: 'none',
});
      });
      window.onresize = function () {
        if (window.innerWidth > 600) {
          nextParticle.width = window.innerWidth - 20;
          nextParticle.height = window.innerHeight - 20;
          nextParticle.start();
        }
      };
    </script>

我也在 index.html

中添加了这个

<script src="/nextparticle.min.js"></script>

同样，没有结果。这是图书馆的 documentation 感谢任何帮助，谢谢。

Answer 1

我猜你必须 export 你的背景组件，因为这就是错误所提到的。

import React, {Component } from 'react'
import { NextParticle } from 'nextparticle';
import {Helmet} from "react-helmet";

export const Background = () => (
  <div>
    <Helmet>
        <script src="../nextparticle.js" type="text/javascript" />
    </Helmet>
    <NextParticle />
    </div>
  );

如果您想在 React 中导入第三方脚本，请直接在 index.html 中导入。通常在 public 目录中。除非你真的需要 Helmet.

在 React.js 中实现 JS 库

Implementing JS library in React.js

javascript

import

components

render

reactjs