Показать сообщение отдельно
  #1 (permalink)  
Старый 19.07.2024, 10:15
Аватар для deniscikasov@gmail.com
Аспирант
Отправить личное сообщение для deniscikasov@gmail.com Посмотреть профиль Найти все сообщения от deniscikasov@gmail.com
 
Регистрация: 14.03.2023
Сообщений: 76

React и изменение текса
Может кто нибудь сказать как сделать так, что бы после отображения 'Постоянно учусь' удалилось только 'учусь' и написалось 'ленюсь'

import { useState, useEffect } from 'react';
import { Container, Row, Col } from 'react-bootstrap';

export const Banner = () => {
  const toRotate = ['Веб-разработчик', 'Постоянно учусь', 'Постоянно ленюсь'];
  const [loopNum, setLoopNum] = useState(0);
  const [text, setText] = useState('');
  const [delta, setDelta] = useState(150 - Math.random() * 150);
  const period = 1000;
  const [isDeleting, setIsDeleting] = useState(false);

  useEffect(() => {
    const ticker = setInterval(tick, delta);
    return () => clearInterval(ticker);
  }, [text]);

  const tick = () => {
    const i = loopNum % toRotate.length;
    const fullText = toRotate[i];
    const updateText = isDeleting
      ? fullText.substring(0, text.length - 1)
      : fullText.substring(0, text.length + 1);

    setText(updateText);

    if (isDeleting) {
      setDelta((prevDelta) => prevDelta / 2);
    }

    if (!isDeleting && updateText === fullText) {
      setIsDeleting(true);
      setDelta(period);
    } else if (isDeleting && updateText === '') {
      setIsDeleting(false);
      setDelta(500);
      setLoopNum((prevLoopNum) => prevLoopNum + 1);
    }
  };

  return (
    <section className="banner">
      <Container>
        <Row>
          <Col xs={12} md={6} xl={7}>
            <span>Добро пожаловать</span>
            <h1>{`Привет, я Денис ${text}`}</h1>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
              fugiat consequuntur amet explicabo delectus voluptatem libero eum
              impedit! Saepe vel, impedit voluptatibus dolores ipsum enim
              placeat deleniti numquam dolor nostrum.
            </p>
          </Col>
        </Row>
      </Container>
    </section>
  );
};

Последний раз редактировалось deniscikasov@gmail.com, 19.07.2024 в 11:17.
Ответить с цитированием