将JavaScript代码转换为react组件类格式

我正在开发我的第一个React应用程序，并试图了解如何在页面中使用JS小片段

比如,；我想使用在我的代码中创建的以下交互式SVG Chris Coyer。添加HTML和CSS很容易，但是实现JS的正确方法应该是什么呢

复制并粘贴到my home.js页面显然不起作用

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);
  });
});

---

您可以通过添加

wordStates

和

svgStates

作为类变量来使用它，并通过将查询选择器函数添加到componentdod mount函数中来操作组件中的变量，如

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);
      });
    });
  }
}

---

你试过什么了吗？你有什么理由想要这个吗？如果你想以“反应方式”构建它，那么你需要将各个部分分解为组件。我会把它分成3个部分（应用程序、地图和列表），地图和列表共享应用程序中的道具，这些道具保存悬停事件的状态等等。不，我还没有尝试过任何东西。这是一个澄清执行的问题——我该怎么做？我注意到标题改为“react component类格式”。所以我猜我需要创建一个组件类？嗨，我得到了错误：编译失败。/src/app/Home.js语法错误：意外令牌（28:10）>私有wordStates；此错误发生在生成期间，无法排除。我已编辑代码以将私有变量初始化为空数组，请进行此更改并重新测试。我恐怕收到了相同的错误。语法错误：意外的令牌类Home扩展组件{private wordStates=[]；哎呀，私有说明符不应该存在。对不起，我一直在typescript中使用react，因此我没有注意到周围的说明符。：）请检查，现在再次进行一个小更改以添加构造函数。初始化构造函数中的变量更合适。