如何在react js的功能组件中创建ref？

编程问答 2022-04-27

问题描述

我正在尝试在功能组件中创建 ref 。但与 class based component 相比得到不同的输出。

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

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

查看引用映射（正确的引用映射）

enter image description here

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

这是我的函数组件 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
  });

我得到这个输出

enter image description here

为什么我从 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);
      }
    });
  },[]);

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptreact-refreactjsreactjs