如何提取Styled Components子节点a标签宽度并作为Props传递

要获取每个Icons组件内部a标签的宽度并在样式中使用，你需要通过React状态传递宽度值结合ref获取DOM元素的方式实现，因为styled-components无法直接访问子元素的DOM属性。具体步骤如下：

1. 创建多个ref存储每个a标签的DOM引用 #

因为有多个Icons实例，需要给每个a标签分配独立的ref，这里可以用useRef创建一个数组来存储：

2. 计算宽度并更新状态 #

在组件挂载后，以及a标签内容发生变化时，获取每个a标签的宽度，存入状态中。

3. 将宽度作为props传给Icons组件 #

把每个实例对应的宽度传给Icons，在styled样式中通过props使用这个宽度值。

完整代码示例 #

import React, { useState, useRef, useEffect } from "react";
import styled from "styled-components";
import home from "../images/home-icon.svg";
import search from "../images/search-icon.svg";

const Header = () => {
  // 存储每个a标签的宽度，索引对应Icons实例的顺序
  const [linkWidths, setLinkWidths] = useState([0, 0]);
  // 创建ref数组，对应两个a标签
  const linkRefs = useRef([React.createRef(), React.createRef()]);

  useEffect(() => {
    const calculateWidths = () => {
      const widths = linkRefs.current.map(ref => {
        if (ref.current) {
          return ref.current.offsetWidth;
        }
        return 0;
      });
      setLinkWidths(widths);
    };

    // 初始计算宽度
    calculateWidths();
    // 监听窗口大小变化（如果内容随窗口变化的话）
    window.addEventListener("resize", calculateWidths);
    
    // 清理函数
    return () => {
      window.removeEventListener("resize", calculateWidths);
    };
  }, []); // 如果a标签内容是动态的，把内容变量加到依赖数组里

  return (
    <Navbar>
      <Icons imgUrl={home} linkWidth={linkWidths[0]}>
        <div className="special-underline"></div>
        <a className="text-container" href="/" ref={linkRefs.current[0]}>HOME</a>
      </Icons>
      <Icons imgUrl={search} linkWidth={linkWidths[1]}>
        <div className="special-underline"></div>
        <a className="text-container" href="/" ref={linkRefs.current[1]}>SEARCH</a>
      </Icons>
    </Navbar>
  );
};

const Icons = styled.div`
  // 示例：使用传入的a标签宽度来设置下划线的宽度
  .special-underline {
    width: ${props => props.linkWidth}px;
    height: 2px;
    background-color: #000;
    margin-top: 4px;
  }

  // 其他原有样式
  background-image: url(${props => props.imgUrl});
  background-size: contain;
  background-repeat: no-repeat;
  padding-top: 24px;
  // ... 其他样式
`;

关键说明 #

• 如果a标签的内容是动态变化的（比如从接口获取），需要把内容变量添加到useEffect的依赖数组中，确保内容变化时重新计算宽度。
• 使用offsetWidth获取元素的实际渲染宽度，也可以根据需求用clientWidth（不含边框）或scrollWidth（包含溢出内容）。
• 监听resize事件是为了处理窗口大小变化导致的宽度改变，如果你的场景不需要，可以移除这部分代码。

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