一段时间后如何更改组件的类别?

时间:2019-05-29 20:34:27

标签: javascript html reactjs

我正在使用一个渲染SVG图像但不渲染填充的组件。我上了两节课

.svg  {
  fill-opacity: 0;


.svg-show {
  fill-opacity: 1;
  transition: fill-opacity 2s;
}

}我的问题是,在持续时间为200的情况下,如何将类名svg-show应用于以下组件

  <ReactVivus
            className="svg"
            option={{
              file: forever,
              duration: 200,
              animTimingFunction: "oneByOne",
              type: "delayed",
              onReady: console.log
            }}
            callback={console.log}
          />

2 个答案:

答案 0 :(得分:2)

在组件中有一个状态变量,然后根据该变量选择类名称。在类组件中,如下所示:

line = re.sub(r"""
  \!   # Match a literal '!'
  \[   # Match a literal '['
  (?x) # Use free-spacing mode.
  <    # Match a literal '<'
  /?   # Optionally match a '/'
  \d+  # Match one or more digits
  >    # Match a literal '>'
  """, "", line)

答案 1 :(得分:2)

如果要使用钩子:


import React, {useState, useEffect} from "react";

function Calendar() {
    const [svgShow, setSvgShow] = useState(false);

    useEffect(() => {
        setTimeout(() => {
            setSvgShow(true);
        }, 200);
    }, []);

    return (
        <ReactVivus
            className={svgShow ? "svg-show" : "svg"}
            option={{
                file: forever,
                duration: 200,
                animTimingFunction: "oneByOne",
                type: "delayed",
                onReady: console.log
            }}
            callback={console.log}
        />
    )
}
export default Calendar;