转发引用：forwardedRef始终为null

Question

我有一个希望将Table附加到的蚂蚁设计ref组件。

我希望能够在HOC tableRef的生命周期withCustomPagination方法中使用componentDidUpdate。

在React Docs Forwarding Refs之后，我无法清楚地理解。我可以编写以下代码：

App.js

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

class App extends React.Component {
  render() {
    const tableRef = React.createRef();
    return (
      <WrappedTable ref={tableRef} />
    )
  }
}

Table.js

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

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

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

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

withCustomPagination.js

import CustomPagination from 'path/to/file';

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

    componentDidUpdate() {
      tableRef.current.state ..... //logic using ref, Error for this line
      this.state.rows ..... //some logic
    }

    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;

调试后，我发现forwardedRef始终为空。

Answer 1

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

                              here
const withCustomPagination = tableRef => Component => {

您需要删除该参数。访问ref道具的方法只是在componentDidUpdate道具之类的forwardedRef方法中，例如：

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;

还有一些需要注意的地方：

您不应在render方法中创建ref，因为每次设置状态时都会引发此方法。我建议您在构造函数中执行此操作：

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

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

您也可以只渲染一个孩子或使用React.Fragment。此外不要忘记发送其余属性：

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;

Answer 2

要访问HOC tableRef中的withCustomPagination，我从 App.js 和相应的const tableRef = React.createRef()行中删除了ref = {tableRef}。 我将tableRef传递给HOC，咖喱withCustomPagination(tableRef)(NewGiftCardTable)。我还删除了HOC中的所有 Forwarding Refs 逻辑，因为我只需要在HOC中访问tableRef，而无需在 App.js 中访问。

在上面删除的行中添加到 Table.js ：

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;