在 React 样式组件上使用 'ref' 不起作用

Posted

技术标签:

【中文标题】在 React 样式组件上使用 \'ref\' 不起作用【英文标题】:Using 'ref' on React Styled Components is not working在 React 样式组件上使用 'ref' 不起作用 【发布时间】:2018-11-22 01:25:17 【问题描述】:

我在使用带有样式组件的refs 时遇到了困难。当我尝试在下面的类方法中访问它们时,出现以下错误:

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>

我从this question找到了代码

我在这里做错了什么?

【问题讨论】:

★ 从 styled-components v4 使用 ref 属性可以正常工作 → Docs link 【参考方案1】:

如果您以 ref 样式扩展另一个组件,则转发需要付出努力。所以我的解决方案是使用as prop 扩展该组件。

之前:

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 />

【讨论】:

【参考方案2】:

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

详细讨论可以在GitHub找到

【讨论】:

This is also in the docs. 对于 v4 及以上版本,请直接使用 ref 属性。 我收到了来自 Emotion 的警告,innerRef 将来会被弃用

以上是关于在 React 样式组件上使用 'ref' 不起作用的主要内容,如果未能解决你的问题,请参考以下文章

React - 发送 ref 作为道具不起作用

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

React ref

react-redux-v6: withRef 被移除。要访问包装的实例,请在连接的组件上使用 ref

React hook useRef 不适用于样式化组件和打字稿

styled 函数不会将样式应用于组件