ReactJS 获取选中 Tab 的位置、长宽 - 完整指南

在 React 中实现多个 Tab 并获取选中的 Tab 位置、长度和宽度可以通过以下步骤完成：

1. 在 React 组件的 state 中添加一个属性来追踪当前选中的 Tab 的位置、长度和宽度。例如，可以添加一个名为activeTab的属性。

2. 在每个 Tab 元素上绑定一个点击事件处理函数，当点击某个 Tab 时，将选中的 Tab 的位置、长度和宽度存储在 state 中。例如，可以在点击事件处理函数中使用getBoundingClientRect()方法来获取选中 Tab 的位置、长度和宽度。

以下是一个简单的示例代码：

import React, { useState } from 'react';

const TabComponent = () => {
  const [activeTab, setActiveTab] = useState(null);

  const handleTabClick = (event) => {
    const tabRect = event.target.getBoundingClientRect();
    setActiveTab({
      top: tabRect.top,
      left: tabRect.left,
      width: tabRect.width,
      height: tabRect.height,
    });
  };

  return (
    <div>
      <div onClick={handleTabClick}>Tab 1</div>
      <div onClick={handleTabClick}>Tab 2</div>
      <div onClick={handleTabClick}>Tab 3</div>
      {activeTab && (
        <div>
          Active Tab Position: {activeTab.top}, {activeTab.left}
          Active Tab Size: {activeTab.width}, {activeTab.height}
        </div>
      )}
    </div>
  );
};

export default TabComponent;

在上面的示例中，我们使用useState钩子来创建一个名为activeTab的 state 属性来存储选中 Tab 的位置、长度和宽度。当点击某个 Tab 时，调用handleTabClick函数来更新activeTab的值。最后，根据activeTab的值来显示选中 Tab 的位置、长度和宽度的信息。