如何解决如何在react js的功能组件中创建ref?
我正在尝试在功能组件中创建 ref 。但与 class based component
相比得到不同的输出。
这里是简单的 class based component
。在基于类的组件中,我得到了正确的引用
这里是基于类的组件 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);
}
});
},[]);
解决方法
正如@TabW 所解释的,函数组件没有引用。但是您不需要对 Tab
组件本身的引用。您只需转发引用即可获取底层 offsetWidth
元素的 li
,而无需使用 useImperativeHandle
。
直接在 li
上附加您转发的参考:
const Tab = React.forwardRef(({ children },ref) => {
return <li ref={ref}>{children}</li>;
});
并从您访问它的位置删除 .tab
属性。
由于here 所述的原因,您不能将 ref 属性添加到功能组件。 您可以使用 forwardRef 函数结合 useImperativeHandle hook 来模拟类组件 ref,但只要 Tab 是函数组件,您就不能将 ref 添加到您的 Tab 组件中。
例如,您可以向 Tab 组件添加一些代码,如下所示。
const Tab = React.forwardRef(({ children },ref) => {
const liRef = useRef(null);
React.useImperativeHandle(ref,() => ({
tab: liRef.current
}));
return <li ref={liRef}>{children}</li>;
});
export default Tab;
如果你想存储所有 Tab 组件的所有 refs 并在以后调用它的一些函数,你可以在 useImperativeHandle 钩子中添加函数。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。