如何从 React-Particles-JS 库导入这个接口？

Question

我试图在 react-particles-js 库中将我的参数与我的 JSX 分开。我将我的参数放在一个对象中：

let options = {
        "particles": {
            "number": {
                "value": 50
            },
            "size": {
                "value": 3
            }
        },
        "interactivity": {
            "events": {
                "onhover": {
                    "enable": true,
                    "mode": "repulse"
                }
            }
        }
    }

然后我写我的 JSX：

<Particles params={options}/>

当我这样做时，我得到了错误

The types of 'interactivity.events.onhover.mode' are incompatible between these types.
    Type 'string' is not assignable to type '"repulse" | "grab" | "push" | "remove" | "bubble" | InteractivityMode[] | undefined'.  TS2322

我无法导入 InteractivityMode 界面，因为它没有导出到库中。我不确定在这里做什么。

Answer 1

如果你检查它的类型定义

https://github.com/Wufe/react-particles-js/blob/master/index.d.ts

export type IParticlesParams = RecursivePartial<{
  ...
}>

export interface ParticlesProps {
    width?: string;
    height?: string;
    params?: IParticlesParams;
    style?: any;
    className?: string;
    canvasClassName?: string;
}

type Particles = ComponentClass<ParticlesProps>;

所以导入类型IParticlesParams并使用它

import { Particles, IParticlesParams } from "react-particles-js";

let options: IParticlesParams = {
  ...
}

如果还有其他类型错误，在您的文件中正常处理就可以了

如何从 React-Particles-JS 库导入这个接口？

How do I import this interface from the React-Particles-JS library?

html

css

typescript

reactjs

particles.js