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

大佬教程收集整理的这篇文章主要介绍了嘿，我如何将此 JS 转换为 react？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

开发过程中遇到嘿，我如何将此 JS 转换为 react？的问题如何解决？下面主要结合日常开发的经验，给出你关于嘿，我如何将此 JS 转换为 react？的解决方法建议，希望对你解决嘿，我如何将此 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);
   });
 }

在那个反应组件中，我只有一些 classname="square" 的 div

export default function someComponent() {
  return (
    <div classname="row ">
      <div classname="square"></div>
      <div classname="square"></div>
      <div classname="square"></div>
      <div classname="square"></div>
      <div classname="square"></div>
      <div classname="square"></div>
      <div classname="square"></div>
      <div classname="square"></div>
      <div classname="square"></div>
      <div classname="square"></div>
    </div>
  );
}

解决方法

@H_450_16@

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

从中返回一个 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>
    );
  }

,

最简单的方法是这样的

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
}