Лучшая практика при использовании функций внутри компонента React - PullRequest
Новая
       62

Лучшая практика при использовании функций внутри компонента React

0 голосов
/ 29 апреля 2020

Я создаю компонент React и пытаюсь привести в порядок свой код. Я новичок в React.

У меня есть функция внутри компонента, которая меняет курсор с указателя на размер по размеру, учитывая смещение мыши внутри кнопки. 

_onMouseMove(e){
var cursorOffsetX= e.nativeEvent.offsetX;
var cursorRightLimit = this.state.width - 30;
var width = this.state.width;
if (cursorOffsetX >= cursorRightLimit && cursorOffsetX <= width){
  this.setState({
    cursor: 'col-resize',
    resizeRight: true
  });
}
}

Я хочу поместите этот код в функцию внутри компонента, и я не знаю, должен ли я передавать cursorOffsetX, cursorRightLimit и width в качестве параметров, или просто обращаться к ним из функции через состояние компонента.

Можете ли вы предложить лучший подход между 1 и 2? Или, если вы считаете, что оба не правы, предложите правильный?

Спасибо!

1 - Используйте this.state.foo:

resizeRightCursor(cursorOffsetX){
const cursorRightLimit = this.state.width - 30;
if (cursorOffsetX >= cursorRightLimit && cursorOffsetX <= this.state.width){
  this.setState({
    cursor: 'col-resize',
    resizeRight: true
  });
}    
}



_onMouseMove(e){
var cursorOffsetX= e.nativeEvent.offsetX;
resizeRightCursor(cursorOffsetX);
}

2 - Используйте функцию параметры: 

resizeRightCursor(cursorOffsetX, cursorRightLimit, width){
if (cursorOffsetX >= cursorRightLimit && cursorOffsetX <= width){
  this.setState({
    cursor: 'col-resize',
    resizeRight: true
  });
}}

_onMouseMove(e){
var cursorOffsetX= e.nativeEvent.offsetX;
var cursorRightLimit = this.state.width - 30;
var width = this.state.width;
resizeRightCursor(cursorOffsetX,cursorRightLimit,width);
}
...