访问redux连接组件的ref

import React, { useRef, useEffect } from 'react';
import { connect } from 'react-redux';

// 创建一个高阶组件
const ConnectedComponent = React.forwardRef((props, ref) => {
  // 创建一个ref来引用组件实例
  const componentRef = useRef(null);

  // 在组件挂载或更新时，将ref传递给外部
  useEffect(() => {
    if (ref) {
      ref.current = componentRef.current;
    }
  });

  // 渲染被包裹的组件
  return <WrappedComponent ref={componentRef} {...props} />;
});

// 使用connect函数将组件连接到redux store
const mapStateToProps = (state) => {
  // mapStateToProps的实现
};

const mapDispatchToProps = (dispatch) => {
  // mapDispatchToProps的实现
};

export default connect(mapStateToProps, mapDispatchToProps)(ConnectedComponent);

import React, { useRef } from 'react';
import ConnectedComponent from './ConnectedComponent';

const MyComponent = () => {
  // 创建一个ref
  const componentRef = useRef(null);

  // 访问组件的ref
  const handleClick = () => {
    console.log(componentRef.current);
  };

  return (
    <div>
      <ConnectedComponent ref={componentRef} />
      <button onClick={handleClick}>访问组件的ref</button>
    </div>
  );
};

export default MyComponent;