javascript - 如何在 React js 的功能组件中创建 ref？

Question

我正在尝试在功能组件中创建 ref。但与基于类的组件相比，得到的输出不同。

这是简单的基于类的组件。在基于类的组件中，我得到了正确的引用

这里是基于类的组件 https://stackblitz.com/edit/react-vh86ou?file=src%2Ftabs.js

查看引用映射(正确的引用映射)

我正在尝试对功能组件执行相同的映射但得到不同的输出，为什么？

这是我的功能组件 https://stackblitz.com/edit/react-nagea2?file=src%2FApp.js

export default function App() {
  useEffect(() => {
    console.log('---', tabRefs);
  }, []);
  const getTabProps = ({ title, key, selected, tabIndex }) => ({
    selected,
    children: title,
    key: tabPrefix + key,
    id: tabPrefix + key,
    ref: e => (tabRefs[tabPrefix + key] = e),
    originalKey: key
  });

我得到这个输出

为什么我从 HTMLLIELEMENT 而不是 TAB 组件获取 Ref？

更新:

我正在尝试获取 offsetWidth 仍然无法获取 https://stackblitz.com/edit/react-nagea2?file=src%2FApp.js

useEffect(() => {
    console.log('---', tabRefs);

    Object.keys(tabRefs).forEach(key => {
      console.log(key);
      if (tabRefs[key]) {
        const width = tabRefs[key].tab.offsetWidth;
        console.log(width);
      }
    });
  }, []);

Answer 1

正如@TabW 所解释的，函数组件没有引用。但是您不需要对Tab 组件本身的引用。您只需转发 ref 即可获取底层 li 元素的 offsetWidth，而无需使用 useImperativeHandle。

将转发的 ref 直接附加到 li 上:

const Tab = React.forwardRef(({ children }, ref) => {
  return <li ref={ref}>{children}</li>;
});

并从您访问它的地方删除 .tab 属性。