Question

更新：以下实现没有错。该错误是由于react-redux升级所致，因为redux现在依赖于功能组件而不是类组件。

import React, { forwardRef } from 'react'

const DivWithRef = forwardRef((props, ref) => {
  return(
    <div ref={ref} {...props}>
      {props.children}
    </div>
  )
})

class AClassComponent extends Component {
  render() {
    return (
      <DivWithRef ref={me => this.node = me} />
    ) 
  }
}

尝试此操作时出现错误：

Warning: Function components cannot be given refs. 
Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

反应不明确导出forwardRef吗？

我使用此代码已有一段时间了，它从未引起任何问题。更新到React 16.8之后，我开始收到上面的警告，但是我的应用程序仍然可以访问DOM Ref，即使react声明它不能这样做。

Answer 1

您要改为执行此操作：

constructor() {
  this.node = React.createRef();
}
// more code
render() {
  return <DivWithRef ref={this.node} />;
}

其余代码正确无误。

Answer 2

我自己回答了。我的实现不是问题。回调引用是有效的实现，如此处所述：Composer Connection

该错误的原因是最新版本的react-redux使用功能组件而不是类组件。更新到react-redux之后，我对已连接组件的引用会返回错误。

Answer 3

仅当您使用React.forwardRef调用定义组件时，第二个引用参数才存在。

React.forwardRef

React是否没有显式导出forwardRef？

3 个答案: