记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);
就先这样,结束啦