如何将JS Progressbar.js对象重写为React组件

Question

我在React玩了几天，一切似乎都相当轻松，直到我陷入将这个JS对象重写为React组件的困境。

这是带有JS对象示例的JsFiddle示例。 如何将其重写为React组件？

这是我正在尝试的：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import ProgressBar from 'progressbar.js';

class Circle extends Component{
  componentDidMount() {
    this._create(this.props);
  }

  _create(props) {
    var container = ReactDOM.findDOMNode(this.refs.progressBar);
    container.animate(props.progress);
  }

  render() {
   return <div ref="progressBar"></div>;
  }
}

Circle.defaultProps = {
  options: {},
  progress: 1.0,
}

export default Circle;

Answer 1

这是一个加载圆的例子，

但不会从上面的代码中进行修改。

相反，我使用SVG ， strokeDashArray和strokeDashOffset

码

import React from 'react';
const styles = {
  svg :{
      position:'fixed', 
      width:'100%',
      height:'100%',
      position:'fixed',
      top:'0', left:'0',
      background:'rgba(240,240,240,1)',
  },
  circle : {
      strokeDasharray : '300',
      transition : 'all .4s ease-in',
  },
}
export default class Loading extends React.Component {    
  constructor(props){
      super(props);
      let screenSize = this._calculateDevice();
      this.state = {  offset:600,
                      cx:screenSize.width/2,
                      cy:screenSize.height/2,
                      r:50,
                  }
      this._unmount = this._unmount.bind(this);
  }  
  _calculateDevice() {
      let width = window.innerWidth
      || document.documentElement.clientWidth
      || document.body.clientWidth;

      let height = window.innerHeight
      || document.documentElement.clientHeight
      || document.body.clientHeight;
      return {width, height}
  } 
  componentDidMount (){
      this.interval = setInterval(() => {
                          const offset = this.state.offset - 50; 
                          this.setState({offset: offset });
                      },200);
  }
  componentWillUnmount() {
      clearInterval(this.interval); 
  }
  _unmount () {
      this.setState({loaded:true});
  }
  _circlePath (){
      let d = `M${this.state.cx},${this.state.cy}a${this.state.r},${this.state.r} 0 1,0 100,0a${this.state.r},${this.state.r} 0 1,0 -100,0`;
      return d
  }
  render (){
      let d = this._circlePath();
      let style = Object.assign({}, styles.circle, {'strokeDashoffset':this.state.offset});
      let svgStyle = styles.svg;
      return(  
          <svg style={svgStyle}>
              <path
                  stroke = "#AAA"
                  strokeWidth = "5px"
                  fill = "none" 
                  d = {d} 
              />
              <path
                  style = {style}
                  stroke = "#D22"
                  strokeWidth = "5px"
                  fill = "none" 
                  d = {d} 
              />
          </svg> 
      )
  } 
}   

简要说明

componentDidMount (){
  this.interval = setInterval(() => {
                      const offset = this.state.offset - 50; 
                      this.setState({offset: offset });
                  },200);
}

setInterval中的函数将更新偏移量，还将创建新路径。

_circlePath (){
  let d =   `M${this.state.cx},${this.state.cy}a${this.state.r},${this.state.r} 0 1,0 100,0a${this.state.r},${this.state.r} 0 1,0 -100,0`;
  return d
}

并且此函数将创建路径，该路径决定svg中圆的外观。

这样我们就可以通过改变路径来实现旋转圈的效果

注意

由于setInterval函数

我们需要记住清除组件卸下之前的间隔

以避免setInterval在不存在的组件上崩溃。