将工作 VueJS 组件转换为 ReactJS [英] Convert working VueJS component to ReactJS

问题描述

我有一个 Vue 组件 工作得很好.现在我正在尝试将该代码转换为 ReactJS 等效.我对 React 的尝试

 var ticksArray = Array.apply(null, {length: 27}).map(Number.call, Number);导出默认类定时器扩展组件{构造函数(道具){超级(道具)；this.state = {角度:250，矿工:0,最大角度:270，x方向:"",y方向:"",旧X:0,拖动:假}}onMousedown(){this.setState({拖动:true});}onMouseup(){this.setState({拖动:假});}onMousemove(e){如果(！this.state.dragging)返回;this.setState({xDirection : this.state.oldX {tickDivs}

);}}

它不起作用.我错过了一些东西.我假设问题出在这个代码位上.

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

请帮忙解决这个问题.

解决方案

在此处添加此内容而不是评论:

1. React 使用以下语法:

   className={n <= activeTicks ?'activetick' : ''}

2. 在 componentDidMount 中，您以错误的方式分配处理程序，应该是:

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

   请注意，处理程序不是您状态的一部分.以及对应的handler的定义:

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

   为事件处理程序存储引用而不是类方法的原因 - 见#3

3. 不要忘记像这样取消订阅 componentWillUnmount 中的事件处理程序:

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

更新:

这是一个不使用箭头函数的示例:https://jsfiddle.net/6dnrLw4n/4/

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.

解决方案

Add this here instead of comment:

1. React uses the following syntax:

   className={n <= activeTicks ? 'activetick' : ''}

2. 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

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/

这篇关于将工作 VueJS 组件转换为 ReactJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！