javascript - 在高阶组件中使用 ref

Question

我有一个 Table 组件，我希望将 ref 附加到该组件。

使用:Table.js

class Table extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      rows: 1,
      dataLength: props.dataLength,
    }
    this.tableRef = React.createRef(); 
  }

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

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

这工作正常，但现在我的要求已经改变，我想重用 Table 组件并将分页应用到我的应用程序中的所有表格。我决定制作一个 HOC withCustomPagination。

使用:withCustomPagination.js HOC

import CustomPagination from 'path/to/file';

const withCustomPagination = tableRef => Component => {
  return 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() {
      return (
        <Component {...state} />
        <CustomPagination />
      )
    }
  }
}

export default withCustomPagination;

新的 Table.js:

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

const ref = React.createRef();

const Table = props => (
  <TableContainer ref={ref} />
);

const WrappedTable = withCustomPagination(ref)(Table);

HOC withCustomPagination 返回一个类 WithCustomPagination，它有一个 componentDidUpdate 生命周期方法，在逻辑中使用 Table ref。所以我尝试将在 Table.js 中创建的 ref 作为参数传递给 withCustomPagination，即用 ref 和 Table 无状态组件。

ref 的使用是错误的，我收到错误:TypeError: Cannot read property 'state' of null。

我尝试使用Forwarding Refs，但无法实现。

如何将表 ref 传递给 withCustomPagination 并能够在 HOC 中使用它？

Answer 1

在这种情况下，您可以使用 useImperativeHandle

这意味着您必须转发 ref 并指定哪个函数或对象，或者...您想在功能组件内与 ref 共享。

这是我的 Hoc 示例:

import React from 'react';
import { View } from 'react-native';

export function CommonHoc(WrappedComponent) {

    const component = class extends React.Component {

         componentDidMount() {
           this.refs.myComponent.showAlert();

        }

        render() {
            return (
                <>
                    <WrappedComponent
                        ref='myComponent'
                        {...this.state}
                        {...this.props}
                    />
                </>
            );
        }
    };
    return component;
}

这是我的无状态组件

const HomeController=(props,ref)=> {

    useImperativeHandle(ref, () => ({

        showAlert() {
            alert("called");
        },
    }));

    return (
        <Text>home</Text>
    );
};
export default CommonHoc(forwardRef(HomeController));