当它是一个功能组件时如何获得孩子的参考

问题描述

我正在尝试创建一个 HOC 来获取任何组件的 ref。

当我通过普通的 jsx 时，效果很好。但是当我传递一个功能组件时它不起作用：

class GetRef extends React.Component {
  state = {};
  constructor(props) {
    super(props);
    this.renderChildren = this.renderChildren.bind(this);
  }
  componentDidMount() {
    this.props.setRef(this.ref);
  }

  renderChildren() {
    const childElement = React.Children.only(this.props.children);
    return React.cloneElement(childElement,{ ref: (el) => (this.ref = el) });
  }

  render() {
    return <>{this.renderChildren()}</>;
  }
}

const RefRegister = ({ children }) => {
  const [ref,setRef] = useState();
  console.log({ ref });
  return <GetRef setRef={setRef}>{React.Children.only(children)}</GetRef>;
};

const Example = () => <div>example</div>;

export default function App() {
  return (
    <div className="App">
      <RefRegister>
        {/* <div>example</div> */} Works well in this case
        <Example /> // Throws an error passing a component :(
      </RefRegister>
    </div>
  );
}

Demo

解决方法

使用React.forwardRef：

const Example = React.forwardRef((props,ref) => <div ref={ref}>example</div>);

演示 - https://codesandbox.io/s/practical-proskuriakova-ywdj6