Блог

Главная - Вопросы по программированию - Почему следующий код React вызывает пропуск основных моментов css, когда транзакция css не завершена

Почему следующий код React вызывает пропуск основных моментов css, когда транзакция css не завершена

#css #reactjs #css-transitions

#css — код #reactjs #css-переходы

Вопрос:

Следующий код React должен выделять компонент, когда дочерние элементы изменились. Это выделение не всегда происходит, когда изменение происходит до завершения css-транзакции предыдущего изменения. Что я могу с этим поделать? Имеет ли это отношение к React? Или это то, как работает css?

 import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
import { Box } from "@mui/material";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  highlight: {
    backgroundColor: "yellow",
  },
  transparent: {
    transition: "background-color 5s linear",
  },
});

const ChangeHighlight = ({ children }: any) => {
  const classes = useStyles();
  const [className, setClassName] = useState(classes.transparent);
  useLayoutEffect(() => {
    setClassName(classes.highlight);
  }, [children]);
  useEffect(() => {
    if (className === classes.highlight) {
      setClassName(classes.transparent);
    }
  });
  return <Box className={className}>{children}</Box>;
};

export default ChangeHighlight;

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

1. Я тестирую код, его работу: codesandbox.io/s/sharp-bush-kgj3y?file=/src/App.js highloght его сохраняет обновление до конца или нет … может ли у вас возникнуть проблема с повторным запуском для компонента

2. @AneesHikmatAbuHmiad : Спасибо за ваш быстрый ответ. Я постараюсь воспроизвести это и там. Я понятия не имею, почему продолжительность перехода имеет значение для моей настройки.

3. Пожалуйста, если вы можете проверить, где вы вызываете свой компонент, или поделиться кодом здесь, я могу помочь … спасибо

Метки: ,