在 React Styled Components 上使用“ref”不起作用

IT技术 javascript reactjs dom ref styled-components
2021-05-01 02:40:06

我在将refs 与 Styled Components 一起使用时遇到困难。当我尝试在我的类方法中访问它们时，如下所示，我收到以下错误：

Edit.js:42 Uncaught TypeError: this.....contains is not a function

  constructor(props) {
    ....
    this.setWrapperRef = this.setWrapperRef.bind(this);
    this.handleClickOutside = this.handleClickOutside.bind(this);
   }
----------
  setWrapperRef = (node) => {
    this.wrapperRef = node;
  }
  handleEdit = (e) => {
    e.preventDefault();
    this.props.onEdit(this.props.id, this.state.title);
  }
----------
<Wrapper onSubmit={this.handleEdit} ref={this.setWrapperRef}>
  ...
</Wrapper>

我从这个问题中找到了代码

我在这里做错了什么？

2个回答

我自己找到了答案。解决方案是使用innerRef而不是ref因为它ref本身指向样式化组件而不是 DOM 节点。

详细的讨论可以在GitHub上找到

如果您在样式ref转发中扩展另一个组件需要 efford。所以我的解决方案是使用asprop扩展该组件。

前：

import { useRef } from 'react'
import styled from 'styled-components'

const Card = styled.div``
const Block = styled(Card)``

const Component = () => {
    const ref = useRef(null);
    return <Card ref={ref} />
}

后：

import { useRef } from 'react'
import styled from 'styled-components'

const Card = styled.div``
const Block = styled.div``

const Component = () => {
    const ref = useRef(null);
    return <Block as={Card} ref={ref} />
}
其它你可能感兴趣的问题
上一篇库拉不切片 下一篇React.Children 与非元素孩子