Javascript 如何使用react 制作带点的水平滚动

let data = [
  {
    name: 'steve',
    id: 1,
  },
  {
    name: 'Matt',
    id: 2,
  },
  {
    name: 'michel',
    id: 3,
  },
  {
    name: 'Morgan',
    id: 4,
  },
  {
    name: 'joss',
    id: 5,
  },
  {
    name: 'stephen',
    id: 6,
  },
  {
    name: 'clark',
    id: 7,
  },
  {
    name: 'Simmons',
    id: 8,
  },
  {
    name: 'Chris',
    id: 9,
  },
  {
    name: 'Beven',
    id: 10,
  },
];

function App() {
  const outerContainerRef = React.createRef();
  const innerContainerRef = React.createRef();
  const [showNavigation, setShowNavigation] = React.useState(false);
  const [num, setNum] = React.useState(3);

  React.useEffect(() => {
    const outerContainer = outerContainerRef.current;
    const innerContainer = innerContainerRef.current;
    if (!outerContainer || !innerContainer) return;

    const observer = new ResizeObserver(() => {
      setShowNavigation(innerContainer.clientWidth > outerContainer.clientWidth);
    });

    observer.observe(outerContainer);
    observer.observe(innerContainer);

    // Cleanup
    return () => observer.disconnect();
  }, [outerContainerRef.current, innerContainerRef.current]);

  function scrollRight() {
    outerContainerRef.current.scrollBy(outerContainerRef.current.clientWidth, 0);
  }

  function scrollLeft() {
    outerContainerRef.current.scrollBy(-outerContainerRef.current.clientWidth, 0);
  }

  function add() {
    setNum((num) => Math.min(num + 1, data.length));
  }

  function remove() {
    setNum((num) => Math.max(num - 1, 0));
  }

  return (
    <div>
      <div className="outer-container d-flex" ref={outerContainerRef}>
        <div className="inner-container d-flex" ref={innerContainerRef}>
        {data.slice(0, num).map((li) => {
          return (
            <div key={li.id} className="boxes">
              {li.name}
            </div>
          );
        })}
        </div>
      </div>
      <div className="arrow-container">
        {showNavigation && (
          <React.Fragment>
            <button className="left-arrow" onClick={scrollLeft}>
              {'<'}
            </button>
            <button className="right-arrow" onClick={scrollRight}>
              {'>'}
            </button>
          </React.Fragment>
        )}
      </div>
      <button onClick={add}>ADD</button>
      <br />
      <br/>
      <button onClick={remove}>REMOVE</button>
    </div>
  );
}


const rootElement = document.getElementById('root');
const root = ReactDOM.createRoot(rootElement);
root.render(<App />);

.d-flex {
  display: flex;
}

.outer-container {
  width: 100%;
  overflow-x: auto;
}

.inner-container {
  width: max-content;
}

.boxes {
  padding: 12px;
  margin: 4px;
  background-color: rgb(196, 218, 243);
  min-width: 150px;
  text-align: center;
  border-radius: 6px;
}

.arrow-container {
  height: 2em;
}

.right-arrow {
  position: absolute;
  right: 8px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js"></script>

<div id="root"></div>