ReactJS 和 Vivus SVG 动画

Question

我是 reactJS 的新手，我正在尝试在 React 中制作我的 SVG 动画，但我遇到了一些问题。

我从 https://www.npmjs.com/package/vivus

感染了病毒

import React from "react";
import ReactDOM from "react-dom";
import Vivus from "vivus";

export default class MySkills extends React.Component {
constructor() {
    super();
    new Vivus('my-div', {duration: 200, file: 'link/to/my.svg'});
}

render() {
    return (
        <section id="MySkills" className="mySkills">
            <div className="wrapper">
                <div id="my-div"></div>
            </div>
        </section>
    );
}
}

这给我带来了一个错误。我认为问题出在构造函数上，但我不确定将 vivus 对象放在哪里？

错误信息：

未捕获错误：Vivus [构造函数]："element" 参数与现有 ID 无关

Answer 1

您必须在安装组件后初始化您的 Vivus 对象。

export default class MySkills extends React.Component {
    constructor() {
        super();

    }
    componentDidMount(){
        new Vivus('my-div', {duration: 200, file: 'link/to/my.svg'});
    }    
    render() {
        return (
            <section id="MySkills" className="mySkills">
                <div className="wrapper">
                    <div id="my-div"></div>
                </div>
            </section>
        );
    }
}