Задать вопрос

bitwheeze

Ответы пользователя по тегу React

  • Почему не работают onTransitionRun и onTransitionStart в реакте?

    @bitwheeze Автор вопроса
    Вопрос решился самостоятельной подпиской на события.

    import { useCallback, useEffect, useRef, useState } from "react";
import "./styles.css";

export default function App() {
  const [counter, setCounter] = useState(0);
  const divRef = useRef(null);

  const inc = useCallback(() => setCounter((c) => c + 1), []);
  const dec = useCallback(() => setCounter((c) => c - 1), []);

  useEffect(() => {
    divRef.current.addEventListener("transitionrun", inc);
    divRef.current.addEventListener("transitionend", dec);
    () => {
      divRef.current.removeEventListener("transitionend", dec);
      divRef.current.removeEventListener("transitionrun", inc);
    };
  }, []);

  return (
    <div className="App">
      <div ref={divRef} className="withtransition">
        {counter}
      </div>
    </div>
  );
}
    Ответ написан
    Комментировать
    Комментировать

  • Почему useReducer не принимает мой reducer?

    @bitwheeze Автор вопроса
    Проблема видимо в WebStorm - typescript. Если в настройках выбрать typescript который вместе с WebStorm идет, то ошибка уходит.

    669253647fe73980880427.png

    Возможно что то в более новой версии компайлера поменялось, в выводе и WS неверно интерпретировал вывод. Не знаю.

    А так оно компилировалось в консоли и запускалось.
    Ответ написан
    Комментировать
    Комментировать

  • Почему не передается обновленный state в интервал?

    @bitwheeze
    Я не специалист, возможно вру. У вас "export const App" это функция, которая запускается каждый раз, когда надо перерисовать компоненту. В один из таких вызовов вы создаете таймер и передаете ему стрелочную функцию, которая будет вызываться с заданной периодичностью. После того как App функция создаст таймер с этой вашей функцией, она закончит свою работу и все состояние стэка вместе с переменными уйдет в нирвану. Потом когда таймер вызовет вашу стрелочную функцию, то ей просто уже негде будет брать данные. В лучшем случае она будет все еще иметь доступ к тем значениям, которые были в момент создания таймера.

    Стейт поменяется уже в в другом вызове функции App, та стрелочная функция таймера о ней ничего не знает.

    Я не понял, что вы хотите там изобразить. Возможно вам надо поискать useDebounce хук.
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать, чтобы одновременно был открыт только один элемент аккордеона?

    @bitwheeze
    Ну если у каждого элемента аккардиона есть свой уникальный id, то в стейте храните id открытого элемента. А в каждом элементе что то вроде такого делайте

    const [openId, setOpenId] = useState();
return (<>{elems.map(el => <AccElement key={el.id} open={opendId===el.id} onClick={() => setOpenId(el.id)} data={el} />}</>);
    Ответ написан
    Комментировать
    Комментировать