使用 react-redux (v. 6.0.1) 在功能组件中转发 ref

问题描述：

我正在尝试在我的功能组件中使用 forwardRef，该组件也使用 react-redux.我的组件如下所示:

I'm trying to use forwardRef in my functional component that is also using react-redux. My component looks like this:

const InfiniteTable = ({
  columns,
  url,
  data,
  stateKey,
  loading,
  loadMore,
  fetchData,
  customRecordParams,
  ...rest
}, ref) => {
  const [start, setStart] = useState(0);
  const tableRef = React.createRef();

  console.log(rest);

  let dataSource = data;
  if (customRecordParams) dataSource = _.map(dataSource, customRecordParams);
  if (dataSource.length > FETCH_LIMIT)
    dataSource = _.slice(dataSource, 0, start + FETCH_LIMIT);

  useEffect(() => setupScroll(setStart, tableRef), []);
  useEffect(() => {
    if (loadMore) fetchData(url, stateKey, { start });
  }, [start, loadMore]);

  useImperativeHandle(ref, () => ({
    handleSearch: term => console.log(term),
    handleReset: () => console.log("reset")
  }));

  return (
    <Table
      columns={columns}
      dataSource={dataSource}
      pagination={false}
      showHeader
      loading={loading}
    />
  );
}; 

const mapStateToProps = (state, ownProps) => ({
  data: Object.values(state[ownProps.stateKey].data),
  loading: state[ownProps.stateKey].isFetching,
  loadMore: state[ownProps.stateKey].loadMore
});

export default connect(
  mapStateToProps,
  { fetchData },
  null,
  { forwardRef: true }
)(InfiniteTable);

但是，当我尝试使用带有 ref 属性的组件时出现此错误:

However I'm getting this error when trying to use my component with a ref prop:

警告:不能为函数组件提供引用.尝试访问此引用将失败.你的意思是使用 React.forwardRef() 吗?

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

我做错了什么?

答

InfiniteTable 签名不正确，是 legacy context 作为功能组件中的第二个参数接收，而不是 ref.为了接收 ref 对象以与 useImperativeHandle 一起使用它，组件应该用 React.forwardRef 包装.

InfiniteTable signature is incorrect, it's legacy context that is received as second parameter in functional components, not ref. In order to receive ref object to use it with useImperativeHandle, a component should be wrapped with React.forwardRef.

正如参考所述，

useImperativeHandle 自定义使用 ref 时暴露给父组件的实例值.与往常一样，在大多数情况下应该避免使用 refs 的命令式代码.useImperativeHandle 应该与 forwardRef 一起使用

useImperativeHandle customizes the instance value that is exposed to parent components when using ref. As always, imperative code using refs should be avoided in most cases. useImperativeHandle should be used with forwardRef

应该是:

const InfiniteTable = forwardRef((props, ref) => { ... });

export default connect(
  mapStateToProps,
  { fetchData },
  null,
  { forwardRef: true }
)(InfiniteTable);

使用 react-redux (v. 6.0.1) 在功能组件中转发 ref

相关推荐