Блог

Главная - Вопросы по программированию - Эй, как мне преобразовать этот JS в react?

Эй, как мне преобразовать этот JS в react?

#javascript #reactjs

Вопрос:

Я совсем новичок в 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);
   });
 }

В этом компоненте react у меня есть только несколько дивов с именем класса=»квадрат».

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

Комментарии:

1. С какой частью вы боретесь? Не могли бы вы быть немного более конкретными?

Ответ №1:

Создайте компонент для каждого квадрата.

Верните из него JSX div.

Создайте состояние в этом компоненте для light (по умолчанию для false ).

Если light верно, добавьте класс в список имен классов для div ( classnames модуль полезен здесь).

Добавьте функцию onMouseOver, которая устанавливает состояние light в значение true.

Добавьте useEffect крючок, который зависит от значения light . Внутри этого крючка используйте setTimeout , чтобы изменить состояние обратно на false после определенного периода времени.

Комментарии:

1. useEffect (() = > { задержка const = setTimeout (() = > > { setHovered(ложь); }, 800); возврат () =>>> clearTimeout(задержка); }, []);

2. Выглядит ли это так, как должно выглядеть?

3. Это выглядит разумно.

4. @Marty если это тот ответ, который вы ищете, пожалуйста, примите его (похоже, вы знаете, как это сделать😀), чтобы это помогло другим людям.

Ответ №2:

хоро, ты можешь это проверить? и это онлайн-демонстрация

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

Ответ №3:

Самый простой способ сделать это было бы что-то вроде этого

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

Ответ №4:

Сначала создайте квадратный компонент;

  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

Когда вы наведете курсор мыши на квадратный компонент, он загорится красным, если вы сделаете это снова, имя класса будет равно нулю, поэтому оно вернется к обычному цвету. Простой урок для вас

 CSS
.space{
  padding: 5px;
}
.light{
    color: red
}
Метки: ,