时间戳

首页 > 解决方案 > 在反应中将 ref 传递给样式化的组件

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

问题描述

我想在反应中获得样式化组件的高度和宽度。我正在使用这个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 但我也失败了。有人知道让它工作吗？

标签： reactjsstyled-componentsref

解决方案

尝试这个。

在功能组件中使用 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>
    )
}

推荐阅读