javascript ReactJS和Vivus SVG动画

iqjalb3h 于 5个月前发布在 Java

关注(0)|答案(1)|浏览(74)

我是reactJS的新手，我试图在React中制作SVG动画，我遇到了一些问题。
我从https://www.npmjs.com/package/vivus得到了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 [constructor]：“element”参数与现有ID无关

JavaScript

来源：https://stackoverflow.com/questions/38126627/reactjs-vivus-svg-animation

1条答案

按热度按时间

wi3ka0sx1#

你必须在组件被挂载后初始化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>
        );
    }
}

字符串

赞(0）回复(0）举报 5个月前

我来回答

javascript ReactJS和Vivus SVG动画

1条答案

相关问题

热门标签

最新问答