记dva再React的forwardRef使用connect问题

首先说一下版本：

• React 版本：16.14.0，
• dva 版本：2.4.1

问题

由于项目老旧，现在说一下问题。

在React针对React的forwardRef使用connect问题上，其实React官方在16.3版本后就解决了使用方法，那么在现在大部分使用的方法如下：

const Component = React.forwardRef((props, ref) => { return <></>; }); 
export default connect(state => state, null, null, { forwardRef: true })(Component);

但是在这个项目中，还是有问题的，由于不清楚这里是不是dva问题，也不能轻易升降dva版本，那么就只能使用老得兼容方法。

// wrap函数接受一个组件(Component)作为参数
function wrap(Component) {
  // ForwardRefComp是一个使用forwardRef包裹的函数组件
  const ForwardRefComp = props => {
    // 从props中解构出forwardedRef和其余的props
    const { forwardedRef, ...resProps } = props;
    // 返回原始组件，并传递解构后的props和forwardedRef
    return <Component ref={forwardedRef} {...resProps} />;
  };

  // StateComp是通过connect高阶组件连接到Redux store的组件
  const StateComp = connect(state => ({ proTable: state.proTable }))(ForwardRefComp);

  // 返回一个使用forwardRef包裹的函数组件，将ref传递给StateComp
  return forwardRef((props, ref) => <StateComp {...props} forwardedRef={ref} />);
}

// 导出使用wrap函数包裹的ProTable组件
export default wrap(ProTable);

就先这样，结束啦

等等：自己的小博客记录一下：详情页|王沧海的个人博客，王伟杰 (wangcanghai.cn)