嘿，我如何将此 JS 转换为 react？

为每个方块创建一个组件。

从中返回一个 JSX div。

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

如果 light 为真，则将该类添加到 div 的类名列表中（classnames module 在这里很有用）。

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

添加一个 useEffect 钩子，它取决于 light 的值。在该钩子内，使用 setTimeout 在时间段后将状态更改回 false。

holo，你能检查一下吗？ 这是online demo

constructor(props) {
    super(props);
    this.state = {
      name: 'React',currenTindx: undefined,doms: Array.from({length: 10}).fill(1)
    };
  }

  handleMouse = (index: number) => {
    this.setState({
      currenTindx: index
    });
    setTimeout(() => {
      this.setState({
        currenTindx: undefined
      })
    },1000)
  }

  render() {
    const { doms,currenTindx } = this.state;
    return (
      <div>
        <Hello name={this.state.namE} />
        <p>
          Start ediTing to see some magic happen :)
        </p>
        <div>
          {doms.map((item,indeX) => (<div onMouseEnter={() => this.handleMouse(indeX)} className={`square ${CurrenTindx === index ? 'light': ''}`} key={index}>{index}</div>))}
        </div>
      </div>
    );
  }

最简单的方法@R_618_9811@

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

先创建一个 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;

然后在您的页面上；导入并使用

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

当你鼠标悬停在方形组件上时，它会变成红色，如果你再做一次，className 将为空，所以它会变回正常颜色，为你提供简单的教程

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