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

【问题标题】：How do I import this interface from the React-Particles-JS library?如何从 React-Particles-JS 库中导入这个接口？
【发布时间】：2020-03-28 16:33:20
【问题描述】：

我正在尝试在 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 接口，因为它没有在库中导出。我不确定在这里做什么。

【问题讨论】：

标签： html css reactjs typescript particles.js

【解决方案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 = {
  ...
}

如果有任何进一步的类型错误，在你的文件中正常处理就可以了

【讨论】：