Question

我有一个Vue component可以正常使用。现在我尝试将该代码转换为ReactJS equivalent。我对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>
    );
  }
}

它无法正常工作。我错过了一些东西。我假设问题出在这个代码位上。

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

请帮忙解决此问题。

Answer 1

在此处添加此项而非评论：

React使用以下语法：

className={n <= activeTicks ? 'activetick' : ''}
在componentDidMount中，您以错误的方式分配处理程序，应该是：

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

请注意，处理程序不是您所在州的一部分。以及处理程序的相应定义：

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

为事件处理程序存储引用而不是使用类方法的原因 - 请参阅＃3
不要忘记在componentWillUnmount中取消订阅您的事件处理程序，如下所示：

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

更新：

以下是不使用箭头功能的示例：https://jsfiddle.net/6dnrLw4n/4/

将工作VueJS组件转换为ReactJS

1 个答案: