使用useImperativeHandle和forwardRef后引用未更新，无法获取子组件位置

嘿，我来帮你理清楚这里的问题～你的思路方向是对的——用forwardRef传递引用、useImperativeHandle暴露子组件API，但在具体实现时踩了一个常见的小坑：你把父组件的ref同时用来绑定DOM元素和挂载自定义API，导致两者冲突了。

你的错误根源 #

在你的子组件代码里：

const Text = React.forwardRef(({ onClick }, ref) => {
  const componentAPI = {};
  componentAPI.getLocation = () => {
    return ref.current.getBoundingClientRect ? ref.current.getBoundingClientRect() : 'nope'
  };
  React.useImperativeHandle(ref, () => componentAPI);
  return (<button onClick={onClick} ref={ref}>Press Me</button>);
});

这里存在两个冲突的操作：

1. 你把父组件传递的ref直接绑定到了<button>上，React原本会把DOM元素赋值给ref.current；
2. 紧接着你用useImperativeHandle覆盖了ref.current的值，把自定义的componentAPI对象放了进去。

这就导致当你调用ref.current.getLocation()时，ref.current已经不是DOM节点，而是你的自定义对象了——自然找不到getBoundingClientRect方法。

修正后的代码 #

我们需要给DOM元素单独分配一个内部ref，让父组件的ref只用来承载我们暴露的API：

const Text = React.forwardRef(({ onClick }, ref) => {
  // 内部ref专门用来引用button的DOM节点
  const buttonRef = React.useRef(null);
  
  const componentAPI = {
    getLocation: () => {
      // 通过内部ref获取DOM元素，调用其方法
      return buttonRef.current?.getBoundingClientRect() || 'nope';
    }
  };

  // 用useImperativeHandle把API暴露给父组件的ref
  React.useImperativeHandle(ref, () => componentAPI);

  // button的ref绑定到内部的buttonRef，而非父组件的ref
  return (<button onClick={onClick} ref={buttonRef}>Press Me</button>);
});
Text.displayName = "Text";

const App = () => {
  const ref = React.createRef();
  const [value, setValue] = React.useState(null)
  return (<div>
    <Text onClick={() => setValue(ref.current.getLocation())} ref={ref} />
    <div>Value: {JSON.stringify(value)}</div>
  </div>);
};

ReactDOM.render(<App />, document.querySelector("#app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="app"></div>

关键变化说明 #

• 新增内部buttonRef：专门负责引用<button>的DOM元素，和父组件的ref彻底分开；
• 父组件的ref仅用于承载useImperativeHandle暴露的自定义API；
• getLocation方法通过内部的buttonRef.current获取DOM节点，调用其原生方法。

这样一来，父组件调用ref.current.getLocation()时，就能正确拿到按钮的位置信息了。

内容的提问来源于stack exchange，提问作者Sharcoux