react的楼层效果

实现原理：

        给需要滑动的楼层绑定ref，当点击侧边栏时，通过ref获取到对应渲染的date-floor然后通过scrollIntoView滚动到其位置

import React, { useRef, useState } from 'react';
import './index.scss'
const Floor = () => {
  const floorRef = useRef(null);
  const handleNavigation = (floorNumber,ev) => {
    // ev.target.className='active'
    console.log(ev);
    const floorElement = floorRef.current.querySelector(`[data-floor="${floorNumber}"]`);
    console.log(floorElement);
    floorElement.scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <div>
      <div className="navigation">
        
        <button onClick={(ev) => handleNavigation(1,ev)}>1层</button>
        <button onClick={(ev) => handleNavigation(2,ev)}>2层</button>
        <button onClick={(ev) => handleNavigation(3,ev)}>3层</button>
        <button onClick={(ev) => handleNavigation(4,ev)}>4层</button>
        <button onClick={(ev) => handleNavigation(5,ev)}>5层</button>
        <button onClick={(ev) => handleNavigation(6,ev)}>6层</button>
      </div>

      <div className="floors" ref={floorRef}>
        <div className="floor" data-floor="1">
          <h2>1层内容</h2>
          
        </div>
        <div className="floor" data-floor="2">
          <h2>2层内容</h2>
        </div>
        <div className="floor" data-floor="3">
          <h2>3层内容</h2>
        </div>
        <div className="floor" data-floor="4">
          <h2>4层内容</h2>``
        </div>
        <div className="floor" data-floor="5">
          <h2>5层内容</h2>
        </div>
        <div className="floor" data-floor="6">
          <h2>6层内容</h2>
        </div>
      </div>
    </div>
  );
};

export default Floor;