在React中如何向styled components传递ref以获取组件宽高

问题核心原因 #

你的代码存在两个核心问题：

1. 自定义组件Test没有使用React.forwardRef接收ref，React中ref不属于常规props，默认无法通过props传递给自定义组件
2. 代码中变量名不统一，定义的ref、观测值变量和实际使用的名称不匹配

修正后的完整代码 #

import { forwardRef, useRef } from 'react'
import styled from 'styled-components'
import useResizeObserver from 'use-resize-observer'

// 用forwardRef包裹组件，ref作为第二个参数传入，不能从props解构
const Test = forwardRef(({ className }, ref) => {
  return (
    <div className={className} ref={ref} />
  )
})

const StyledTest = styled(Test)`
  height: 100px;
  width: 100px;
  background-color: greenyellow;
`

const TestClass = () => {
  const testRef = useRef(null)
  const testSize = useResizeObserver({ ref: testRef })

  return (
    <>
      <ThemeProvider theme={testTheme}>
        {/* 首次渲染未拿到尺寸时默认显示0，避免报错 */}
        <h1>Height test: {testSize?.height ?? 0}</h1>
        <StyledTest ref={testRef} />
      </ThemeProvider>
    </>
  )
}

补充说明 #

• styled-components v4及以上版本已经废弃了innerRef用法，直接传递ref即可，不需要额外处理
• 如果你仍在使用v3及更早的styled-components版本，才需要将传递的属性改为innerRef={testRef}，同时自定义组件从props中解构innerRef挂载到DOM节点上

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