背景:同一组件既需要 connect 包裹,又需要 forwardRef 拿到 ref。
方案一(参考react-redux源码):
const TargetComponent = React.forwardRef((props, ref) => {
return <></>;
});
export default connect(state => state, null, null, { forwardRef: true })(TargetComponent);
方案二:
const TargetComponent = React.forwardRef((props, ref) => {
return <></>;
});
function wrap(Component) {
const ForwardRefComp = (props) => {
const { forwardedRef, ...rest } = props;
return <Component ref={forwardedRef} {...rest} />;
};
const StateComp = connect(state => state)(ForwardRefComp);
return React.forwardRef((props, ref) => <StateComp {...props} forwardedRef={ref} />);
}
export default wrap(TargetComponent);
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!