React JS中如何计算组件及子元素的宽度？

解决方案 #

你已经给父容器ul绑定了tabsRef，不需要单独给每个子元素绑定ref，直接通过父容器的DOM实例获取所有子元素的真实宽度即可，修改后的Tabs.js代码如下：

import React, { useEffect, useRef } from "react";

const Tabs = ({ children }) => {
  const tabsRef = useRef(null);

  const setTabsDimensions = () => {
    if (!tabsRef.current) {
      return;
    }

    // 父容器宽度
    const blockWidth = tabsRef.current.offsetWidth;
    let tabsTotalWidth = 0;
    const tabDimensions = {};

    // 直接遍历父容器的真实DOM子节点，也就是所有li元素
    const childElements = tabsRef.current.children;
    Array.from(childElements).forEach((tabDom, index) => {
      const width = tabDom.offsetWidth;
      tabDimensions[index] = {
        width,
        offset: tabsTotalWidth
      };
      tabsTotalWidth += width;
    });
    // 此处可使用计算完成的每个子项宽、偏移量和总宽度做后续逻辑
    console.log(tabDimensions, tabsTotalWidth);
  };

  useEffect(() => {
    setTabsDimensions();
    // 可选添加窗口大小变化监听，适配响应式场景
    window.addEventListener('resize', setTabsDimensions);
    return () => window.removeEventListener('resize', setTabsDimensions);
  }, [children]); // children变化时自动重新计算，适配数据源更新场景

  return (
    <ul ref={tabsRef} className="rc64nav">
      {children}
    </ul>
  );
};

export default Tabs;

说明 #

• 你之前遍历的children是React虚拟元素对象，不是真实DOM节点，因此无法直接读取宽度属性
• tabsRef.current.children返回的是已经渲染到页面的真实DOM子元素集合，转成数组遍历后直接读取offsetWidth就能拿到每个子项的实际渲染宽度
• 给useEffect添加children依赖可以保证子项内容更新时自动重新计算宽度

内容的提问来源于stack exchange，提问作者user944513