Javascript 转发引用：forwardedRef始终为空

我有一个ant设计的

表

组件，我希望

ref

被附加到该组件上

我希望能够使用HOC

中的
tableRef
和CustomPagination

的生命周期

componentDidUpdate

方法

接下来，我无法清楚地理解。我可以编写以下代码：

App.js

import WrappedTable from'/path/to/file'；
类应用程序扩展了React.Component{
render（）{
const tableRef=React.createRef（）；
返回(
)
}
}

Table.js

import with custompagination from'/path/to/file'；
类表扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
}
}
const WrappedTable=带有自定义分页（表）；
导出默认包装表；

使用custompagination.js

从'path/to/file'导入自定义分页；
const with custompagination=tableRef=>Component=>{
使用CustomPagination扩展React.Component的类{
建造师（道具）{
超级（道具）；
此.state={
行：1，
dataLength:props.dataLength，
}
}
componentDidUpdate（）{
tableRef.current.state….//使用ref的逻辑，此行错误
this.state.rows….//一些逻辑
}
render（）{
const{forwardedRef}=this.props；
返回(
)
}
}
return React.forwardRef（（道具，ref）=>{
返回；
});
}
使用自定义分页导出默认值；

调试之后，我发现

forwardedRef

总是空的

---

您的问题发生在您的HOC中：

                              here
const withCustomPagination = tableRef => Component => {

您需要删除该参数。访问ref prop的方法只需使用

componentdiddupdate

方法，如

forwardedRef

prop，例如：

import CustomPagination from 'path/to/file';

const withCustomPagination = Component => {
  class WithCustomPagination extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        rows: 1,
        dataLength: props.dataLength,
      }
    }

    componentDidUpdate() {
      //You got the ref here
      console.log(forwardedRef.current)
    }

    render() {
      const { forwardedRef } = this.props;
      return (
        <Component {...this.state} ref={forwardedRef} />
        <CustomPagination />
      )
    }
  }
  return React.forwardRef((props, ref) => {
    return <WithCustomPagination {...props} forwardedRef={ref} />;
  });
}

export default withCustomPagination;

编辑：

添加ref prop的引用

import withCustomPagination from '/path/to/file';

class Table extends React.Component {
  constructor(props) {
    super(props); 
    this.reference = React.createRef();
  }

  render() {
    <TableContainer ref={this.reference} />
  }
}

const WrappedTable = withCustomPagination(Table);
export default WrappedTable;

import with custompagination from'/path/to/file'；
类表扩展了React.Component{
建造师（道具）{
超级（道具）；
this.reference=React.createRef（）；
}
render（）{
}
}
const WrappedTable=带有自定义分页（表）；
导出默认包装表；

要使用自定义分页访问HOC

中的
tableRef
，我从App.js中删除了
const tableRef=React.createRef（）
，以及相应的
ref={tableRef}
行。
我将
tableRef
传递给HOC，curried，
，并使用自定义分页（tableRef）（NewGiftCardTable）
。我还删除了HOC中的所有转发引用逻辑，之所以这样做是因为我只需要访问HOC中的
tableRef
，而不需要访问App.js

将上述删除的行添加到Table.js：

import with custompagination from'/path/to/file'；
const tableRef=React.createRef（）；
类表扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
}
const WrappedTable=带有自定义分页（tableRef）（Table）；
导出默认包装表；
你的react版本是什么？v16.6.3，在进一步调试代码后，我发现，
ref
实际上是一个
Connect
当我在
App.js
中
console.log（tableRef）
时，因为我使用了
react-redux
像这样的连接函数
导出默认连接（x，y）（可包装）
。我仍在调试代码。我没有将
forwardedRef
作为我实际需要的antd表元素，而是在导出
导出默认连接（x，y）（WrappedTable）时，它是
Connect
来自Table.js。如果我删除connect，我仍然无法获得所需的元素。您是否需要HOC中的
TableContainer
ref？是的，我需要的是ant design Table组件。
                              here
const withCustomPagination = tableRef => Component => {

import CustomPagination from 'path/to/file';

const withCustomPagination = Component => {
  class WithCustomPagination extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        rows: 1,
        dataLength: props.dataLength,
      }
    }

    componentDidUpdate() {
      //You got the ref here
      console.log(forwardedRef.current)
    }

    render() {
      const { forwardedRef } = this.props;
      return (
        <Component {...this.state} ref={forwardedRef} />
        <CustomPagination />
      )
    }
  }
  return React.forwardRef((props, ref) => {
    return <WithCustomPagination {...props} forwardedRef={ref} />;
  });
}

export default withCustomPagination;

import WrappedTable from '/path/to/file';

class App extends React.Component {
  constructor(){
    super();
    this.reference = React.createRef();
  }
  render() {
    return (
      <WrappedTable ref={this.reference} />
    )
  }
}

const withCustomPagination = Component => {
  class WithCustomPagination extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        rows: 1,
        dataLength: props.dataLength,
      }
    }

    componentDidUpdate() {
      //You got the ref here
      console.log(forwardedRef.current)
    }

    render() {
      // Do not forget to send the rest of properties here like:
      const { forwardedRef, ...rest } = this.props;
      return (
        <React.Fragment>
          <Component {...this.state} ref={forwardedRef} {...rest} />
          <CustomPagination />
        </React.Fragment>
      )
    }
  }
  return React.forwardRef((props, ref) => {
    return <WithCustomPagination {...props} forwardedRef={ref} />;
  });
}

export default withCustomPagination;

import withCustomPagination from '/path/to/file';

class Table extends React.Component {
  constructor(props) {
    super(props); 
    this.reference = React.createRef();
  }

  render() {
    <TableContainer ref={this.reference} />
  }
}

const WrappedTable = withCustomPagination(Table);
export default WrappedTable;

import withCustomPagination from '/path/to/file';

const tableRef = React.createRef(); 

class Table extends React.Component {
  constructor(props) {
    super(props); 
  }

  render() {
    <TableContainer ref={tableRef} />
  }

const WrappedTable = withCustomPagination(tableRef)(Table);
export default WrappedTable;