在反应中将 ref 传递给样式化的组件

Posted 2023-02-21

【中文标题】在反应中将 ref 传递给样式化的组件

【英文标题】：Passing ref into styled components in react

【发布时间】：2021-12-21 15:34:08

【问题描述】：

我想在 react 中获取样式化组件的高度和宽度。我正在使用这个https://opensourcelibs.com/lib/use-resize-observer，我的代码看起来像：

const Test = (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 (
        <React.Fragment>
            <ThemeProvider theme=testTheme>
                <h1>Height test: leftContainerSize.height</h1>
                <StyledTest ref=leftContainerRef/>
            </ThemeProvider>
        </React.Fragment>
    )

不幸的是，它不起作用。如果我尝试对图像做同样的事情，它会起作用，所以我认为将 ref 传递给样式化组件存在问题。我读了这篇文章Using 'ref' on React Styled Components is not working，但我不知道如何在我的情况下使用innerRef。我也尝试使用 forwardRef 但我也失败了。有人知道让它工作吗？

【参考方案1】：

试试这个。

在功能组件中使用 forwardRef 来获取 ref。不要试图从 props 中获取 ref。

您的示例缺少变量：leftContainerRef、leftContainerSize。 尽管您正在尝试使用它们。

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  ref, height  = useResizeObserver();

    return (
        <React.Fragment>
            <ThemeProvider theme=testTheme>
                <h1>Height test: height</h1>
                <StyledTest ref=ref />
            </ThemeProvider>
        </React.Fragment>
    )

如果你想使用 ref.您可以创建 ref 并将其传递给钩子。

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 ownRef = useRef(null)
    const  height  = useResizeObserver( ref: ownRef );

    return (
        <React.Fragment>
            <ThemeProvider theme=testTheme>
                <h1>Height test: height</h1>
                <StyledTest ref=ownRef />
            </ThemeProvider>
        </React.Fragment>
    )