Convert working VueJS component to ReactJS

问题

I have a Vue component that works just fine. Now I'm trying to convert that code to ReactJS equivalent. My attempt on React

 var ticksArray = Array.apply(null, {length: 27}).map(Number.call, Number);
 export default class Timer extends Component {
 constructor(props) {
  super(props);
  this.state = {
    angle:250,
    minangle:0,
    maxangle:270,
    xDirection:"",
    yDirection:"",
    oldX:0,
    dragging: false
  }
}
onMousedown(){
  this.setState({dragging : true});
}
onMouseup(){
  this.setState({dragging : false});
}
onMousemove(e){
    if(!this.state.dragging)
      return;
    this.setState({
      xDirection : this.state.oldX < e.pageX ? 'right' : 'left',
      oldX:e.pageX,
      yDirection: this.state.xDirection === 'left' ? 'down' : 'up'
    });
    if(this.state.yDirection === 'up' && this.state.angle + 2 <= 
    this.state.maxangle)
        this.setState({angle:this.state.angle += 2})
    else if(this.state.yDirection === 'down' && this.state.angle - 2 >= 
    this.state.minangle)
        this.setState({angle:this.state.angle -= 2})
}
knobStyle(){
  return {
    'transform':'rotate('+this.state.angle+'deg)'
    }
}
activeTicks(){
  return (Math.round(this.state.angle / 10) + 1);
}
currentValue(){
  return Math.round((this.state.angle/270)*100) + '%'
}
componentDidMount(){
  document.addEventListener('mouseup',this.state.onMouseup)
  document.addEventListener('mousemove',this.state.onMousemove)
}
render() {
    var tickDivs = ticksArray.map(function(item) {
        return (
            <div key={item} className="tick"></div>
        );
    });
    return (
        <div id="timer">
            <div className="knob-surround">
                <div className="knob"></div>
                <span className="min">Min</span>
                <span className="max">Max</span>
                <div className="ticks" className="n <= activeTicks ? 
    'activetick' : ''">
                    {tickDivs}
                </div>
            </div>
        </div>
    );
  }
}

It's not working. I'm missing something. I'm assuming the problem lies in this code bit.

<div className="ticks" className="n <= activeTicks ? 
        'activetick' : ''">

Please help fix this.

回答1:

Add this here instead of comment:

React uses the following syntax:

className={n <= activeTicks ? 'activetick' : ''}
In componentDidMount you assign handlers in a wrong way, should be like:

document.addEventListener('mouseup', this.onMouseup)

Note here that handler is not a part of your state. And the corresponding definition of the handler:

private onMouseup = () => {...}

The reason to store reference for the event handler instead of having class method - see in #3
Do not forget to unsubscribe your event handlers in componentWillUnmount like this:

window.removeEventListener("mouseup", this.onMouseup);

UPDATE:

Here is an example working without using arrow functions: https://jsfiddle.net/6dnrLw4n/4/

来源：https://stackoverflow.com/questions/43733701/convert-working-vuejs-component-to-reactjs

标签

reactjs

Vue.js