Преобразование кода JavaScript для реагирования на формат класса компонента

Question

Я работаю над своим первым приложением React и пытаюсь понять, как я собираюсь использовать небольшие фрагменты JS на странице.

Например;Я хочу использовать следующий интерактивный SVG Крис Койер, созданный в моем коде.Добавить HTML и CSS легко, но какой должен быть правильный способ реализации JS?

Копирование и вставка на мою страницу home.js явно не сработает.

Интерактивный SVG - Демо

var wordStates = document.querySelectorAll(".list-of-states li");
var svgStates = document.querySelectorAll("#states > *");

function removeAllOn() {
  wordStates.forEach(function(el) {
    el.classList.remove("on");
  });
  svgStates.forEach(function(el) {
    el.classList.remove("on");
  });
}

function addOnFromList(el) {
  var stateCode = el.getAttribute("data-state");
  var svgState = document.querySelector("#" + stateCode);
  el.classList.add("on");
  svgState.classList.add("on");
}

function addOnFromState(el) {
  var stateId = el.getAttribute("id");
  var wordState = document.querySelector("[data-state='" + stateId + "']");
  el.classList.add("on");
  wordState.classList.add("on");
}

wordStates.forEach(function(el) {
  el.addEventListener("mouseenter", function() {
    addOnFromList(el);
  });
  el.addEventListener("mouseleave", function() {
     removeAllOn();
  });

  el.addEventListener("touchstart", function() {
    removeAllOn();
    addOnFromList(el);
  });
});

svgStates.forEach(function(el) {
  el.addEventListener("mouseenter", function() {
    addOnFromState(el);
  });
  el.addEventListener("mouseleave", function() {
     removeAllOn();
  });

  el.addEventListener("touchstart", function() {
    removeAllOn();
    addOnFromState(el);
  });
});

Answer 1

Вы можете использовать его, добавив wordStates и svgStates в качестве переменных класса и манипулируя ими в компоненте, добавив функции селектора запросов в компонентную функцию mountdid, например,

import * as React from 'react';
import { Component } from "react";
class Home extends Component {

 constructor(props) {
  super(props); 
  this.wordStates=[];
  this.svgStates=[]; 
  } 


  removeAllOn =()=> {
    this.wordStates.forEach(function (el) {
      el.classList.remove("on");
    });
    this.svgStates.forEach(function (el) {
      el.classList.remove("on");
    });
  }

  addOnFromList=(el)=> {
    var stateCode = el.getAttribute("data-state");
    var svgState = document.querySelector("#" + stateCode);
    el.classList.add("on");
    svgState.classList.add("on");
  }

  addOnFromState=(el)=> {
    var stateId = el.getAttribute("id");
    var wordState = document.querySelector("[data-state='" + stateId + "']");
    el.classList.add("on");
    wordState.classList.add("on");
  }
  componentDidMount() {
    this.wordStates = document.querySelectorAll(".list-of-states li");
    this.svgStates = document.querySelectorAll("#states > *");
    this.wordStates.forEach(function (el) {
      el.addEventListener("mouseenter", function () {
        addOnFromList(el);
      });
      el.addEventListener("mouseleave", function () {
        removeAllOn();
      });

      el.addEventListener("touchstart", function () {
        removeAllOn();
        addOnFromList(el);
      });
    });

    this.svgStates.forEach(function (el) {
      el.addEventListener("mouseenter", function () {
        addOnFromState(el);
      });
      el.addEventListener("mouseleave", function () {
        removeAllOn();
      });

      el.addEventListener("touchstart", function () {
        removeAllOn();
        addOnFromState(el);
      });
    });
  }
}