前端小蜜蜂
首页/列表页/详情页/
记dva再React的forwardRef使用connect问题
2023-11-15395

首先说一下版本:

  • 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);

就先这样,结束啦

王者荣耀英雄联盟穿越火线
想写一首诗送给你
却发现早已没有资格
想写一句话送给我自己
不知何时
心如死灰