Можно ли изменять dom в ReactJS с помощью чистого JS?

Question

[Алексей Костюхин]

Добрый день. Пишу мелкое тестовое приложение drag and drop. Смотрел много инструкций, читал много статей и т.д.
Пришел к выводу, что это можно сделать самому. Сделал все сам, но с помощью голого JS. "Законно ли это?"
Практикуется ли такой метод в React ?
код прилагаю:

spoiler

class Test extends Component {
  //координаты X в данный момент
  state = {
    x: 0,
  }

//Отлавливаем клик
//Задаем позицию "absolute"
//Добавляем новый обработчик на перемещение
  onmousedown = (event) => {
    /*document.getElementById(*)*/
    event.target.style.position = 'absolute';
    document.addEventListener('mousemove', this.onmousemove);
  }

//Отлавливаем "отпускание"  клавиши и удаляем событие перемещения
  onmouseup = (event) => {
    document.removeEventListener('mousemove', this.onmousemove);
  }

//функция перемещения с "центрированием элемента", чтобы курсор мыши оказался по центру элемента (мяча) 
  onmousemove = (event) => {
    this.setState({x: event.clientX})
    let footboll = document.getElementById('footboll');
    let { top, left, right, bottom } = footboll.getBoundingClientRect();
    if(top == event.pageY - 30 || left == event.pageX - 30 || right == event.pageX + 30 || bottom == event.pageY + 30) {
      document.removeEventListener('mousemove', this.onmousemove);
    }

//Функция "реактивного" перемещения элемента по окну.
    this.onPosition(event.pageX, event.pageY);
    document.addEventListener('mouseup', (event) => this.onmouseup(event))
  }

  onPosition = (clientX, clientY) => {
    let element = document.getElementById('boll');
    let widths = element.getBoundingClientRect().width;
    let height = element.getBoundingClientRect().height;
    element.style.top = clientY - height /2 + 'px';
    element.style.left = clientX - widths /2 + 'px';
  }

  render() {
    return (
      <div className="test">
        <h3>Тестовый компонент...</h3>
        <button className="btn btn-primary">Кликни</button>
        <div id="footboll" className="footboll">
          <div>x:{this.state.x}</div>
          <div className="football-goal"
                id="football-goal"></div>
          <span id ="boll"
                className="boll"
                onMouseDown={(event) => this.onmousedown(event)}
                onDragStart={(event) => event.preventDefault()}></span>
        </div>
      </div>
    )
  }
}

export default Test;

Answer 1

[Сергей Сунцев]

Да, конечно можно, это более чем реактовский компонент.
Тут единственное что - можно привязки через рефы делать, да класс поменять на компонент с хуками.
Но по факту будет тоже самое.

А по чистоте и оптимизации кода могут быть уже отдельные вопросы.

Comments

[twolegs]

Не совсем понимаю повсеместные рекомендации "переписать с хуками". Классы имеют право на жизнь и в свежих версиях реакт. Более того, для начинающего разработчика классы с их полноценным жизненным циклом будут даже полезнее в плане понимания работы реакт.

[Сергей Сунцев]

twolegs, не всегда. Хуки подразумевают функциональный подход, что более полезно для будущего фронтенд разработчика.

[Алексей Костюхин]

Ребят, спасибо за объяснения!
В целом понятно, т.е такой подход, как у меня в коде имеет право на жизнь, меня это интересовало по большей части.