Как сделать бесконечную прокрутку элементов на react?

Question

Каким образом реализуется бесконечная прокрутка элементов?

На jquery это делается с помощью $('elem').clone(), но на реакте вообще не понимаю как это можно реализовать.

пример

Answer 1

Возможно сделать например так:

import React from "react";

const Infinite = () => {
  const [state, setState] = React.useState([1, 2, 3, 4, 5]);

  const handleLeft = () => {
    setState((prevState) => {
      const [firstItem, ...rest] = prevState;
      return [...rest, firstItem];
    });
  };
  const handleRight = () => {
    setState((prevState) => {
      return [
        prevState[state.length - 1],
        ...prevState.slice(0, state.length - 1),
      ];
    });
  };

  return (
    <div style={{ display: "flex" }}>
      <button onClick={handleLeft}>Left</button>
      {state.map((item, idx) => (
        <div
          key={idx}
          style={{
            width: "12rem",
            height: "12rem",
            border: "1px solid black",
            fontSize: "10rem",
          }}
        >
          {item}
        </div>
      ))}
      <button onClick={handleRight}>Right</button>
    </div>
  );
};

export default Infinite;

В state можно поместить любой список компонентов.

БЛОГ НА HUSL

Как сделать бесконечную прокрутку элементов на react?

Ответы (1 шт):