Question

我和React玩了几天，一切看起来都相当容易，直到我把这个JS对象重写为React组件而陷入困境。

这是带有JS对象示例的JsFiddle Example。如何将其重写为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

以下是加载圈的示例

但是从上面的代码修改 NOT 。

相反，我使用 SVG ， strokeDashArray 和 strokeDashOffset

<强> CODE

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在不存在的组件上崩溃。

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

1 个答案: