时间戳

首页 > 解决方案 > 一段时间后如何更改组件的类别？

javascript - 一段时间后如何更改组件的类别？

问题描述

我正在使用渲染 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}
          />

标签： javascripthtmlreactjs

解决方案

在组件中有一个状态变量，然后根据该变量选择类名。在类组件中，它看起来像这样：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false,
    }
  }

  componentDidMount() {
    setTimeout(() => this.setState({ show: true}), 200);
  }

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

推荐阅读