Javascript 嘿，我怎么把这个JS转换成react？

我对react还很陌生，只是努力让它正常工作。 这是JS文件的一个片段，我需要将其转换为react

let squares = document.getElementsByClassName("square");

 for (let i = 0; i < squares.length; i++) {
   squares[i].addEventListener("mouseenter", () => {
     squares[i].classList.add("light");
     setTimeout(function () {
       squares[i].classList.remove("light");
     }, 800);
   });
 }

let squares=document.getElementsByClassName（“squares”）；
for（设i=0；i{
正方形[i]。类列表。添加（“灯光”）；
setTimeout（函数（）{
正方形[i]。类列表。删除（“灯光”）；
}, 800);
});
}

在react组件中，我只有一些带有className=“square”的div

导出默认函数SomeComponent（）{
返回(
);
}

为每个正方形创建一个组件

从中返回一个JSX div

在该组件中为

灯创建一个状态（默认为
false
）

如果
light
为true，则将该类添加到div的类名列表中（此处有帮助）

添加一个onMouseOver函数，将
灯光的状态设置为true

添加一个
useffect
挂钩，该挂钩取决于
light
的值。在该挂钩内，使用
setTimeout
在时间段后将状态更改回
false
。
为每个方块创建一个组件

从中返回一个JSX div

在该组件中为
灯创建一个状态（默认为
false
）

如果
light
为true，则将该类添加到div的类名列表中（此处有帮助）

添加一个onMouseOver函数，将
灯光的状态设置为true

添加一个
useffect
挂钩，该挂钩取决于
light
的值。在该钩子内，使用
setTimeout
在时间段后将状态更改回
false
。
holo，您可以检查一下吗？
这是

构造函数（道具）{
超级（道具）；
此.state={
名称：'反应'，
currentIndx:未定义，
doms:Array.from（{length:10}）.fill（1）
};
}
手机=（索引：号码）=>{
这是我的国家({
currentIndx：索引
});
设置超时（（）=>{
这是我的国家({
currentIndx:未定义
})
}, 1000)
}
render（）{
const{doms，currentIndx}=this.state；
返回(

开始编辑以查看发生的奇迹：）

{doms.map（（item，index）=>（this.handleMouse（index）}className={`square${currentIndx===index？'light'：'}}}}}}}}}key={index}>{index}}}
);
}
holo，你能检查一下吗？
这是

构造函数（道具）{
超级（道具）；
此.state={
名称：'反应'，
currentIndx:未定义，
doms:Array.from（{length:10}）.fill（1）
};
}
手机=（索引：号码）=>{
这是我的国家({
currentIndx：索引
});
设置超时（（）=>{
这是我的国家({
currentIndx:未定义
})
}, 1000)
}
render（）{
const{doms，currentIndx}=this.state；
返回(

开始编辑以查看发生的奇迹：）

{doms.map（（item，index）=>（this.handleMouse（index）}className={`square${currentIndx===index？'light'：'}}}}}}}}}key={index}>{index}}}
);
}
最简单的方法是这样做

import React, { useState } from "react";

const ListItem = () => {
  const [hovered, setHovered] = useState(false);

  return (
    <div
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      className={`square ${hovered ? 'light' : ''}`}
    />
  );
}

const List = () => {
  return (
    <div className="row">
      <ListItem />
      <ListItem />
      <ListItem />
      <ListItem />
      <ListItem />
      <ListItem />
      <ListItem />
      <ListItem />
      <ListItem />
      <ListItem />
    </div>
  );
}

import React，{useState}来自“React”；
常量列表项=（）=>{
const[hovered，setHovered]=useState（false）；
返回(
设置悬停（真）}
onMouseLeave={（）=>setHovered（false）}
className={`square${悬停？'light'：'}}
/>
);
}
常量列表=（）=>{
返回(
);
}
最简单的方法是这样做

import React, { useState } from "react";

const ListItem = () => {
  const [hovered, setHovered] = useState(false);

  return (
    <div
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      className={`square ${hovered ? 'light' : ''}`}
    />
  );
}

const List = () => {
  return (
    <div className="row">
      <ListItem />
      <ListItem />
      <ListItem />
      <ListItem />
      <ListItem />
      <ListItem />
      <ListItem />
      <ListItem />
      <ListItem />
      <ListItem />
    </div>
  );
}

import React，{useState}来自“React”；
常量列表项=（）=>{
const[hovered，setHovered]=useState（false）；
返回(
设置悬停（真）}
onMouseLeave={（）=>setHovered（false）}
className={`square${悬停？'light'：'}}
/>
);
}
常量列表=（）=>{
返回(
);
}
首先创建一个方形组件

 import React, { useState } from "react";
import "./Square.css";
export const Square = () => {
  const [light, setLight] = useState(false);
  const mouseOver = () => {
    setLight(!light);
  };
  return (
    <div onMouseOver={mouseOver} className={light ? "light" : null}>
      Square
    </div>
  );
};
export default Square;

首先创建一个正方形组件

 import React, { useState } from "react";
import "./Square.css";
export const Square = () => {
  const [light, setLight] = useState(false);
  const mouseOver = () => {
    setLight(!light);
  };
  return (
    <div onMouseOver={mouseOver} className={light ? "light" : null}>
      Square
    </div>
  );
};
export default Square;

你在挣扎什么？你能说得更具体一点吗？你在挣扎什么？你能说得更具体一点吗？如何正确设置setTimeout？useffect（（）=>{const delay=setTimeout（（）=>{setHovered（false）；}，800）；return（）=>cleartimout（delay）；}，[]）；这看起来是应该的吗？这看起来很合理。@Marty如果这是你要找的答案，请接受它（似乎你知道如何做到这一点我如何正确设置setTimeout？useEffect（（）=>{const delay=setTimeout（（）=>{setHovered（false）；}，800）；return（）=>clearTimeout（delay）；}，[]））；这看起来是应该的吗？这看起来很合理。@Marty如果这是你想要的答案，请接受它（看起来你知道怎么做
import React from 'react'
    import './App.css'
    import Square from './components/Square'
    function App() {
      return (
        <div className="container">
          {Array(3)
            .fill(' ')
            .map((item) => {
              return (
                <tr>
                  <td className="space">
                    <Square />
                  </td>
                  <td className="space">
                    <Square />
                  </td>
                  <td className="space">
                    <Square />
                  </td>
                </tr>
              )
            })}
        </div>
      )
    }

export default App

CSS
.space{
  padding: 5px;
}
.light{
    color: red
}