[英]Warning: Function components cannot be given refs
我正在使用 Next.js 最新版本来制作我的博客网站,不知道为什么会显示错误,当我尝试制作我的表单时会显示如下错误:
Warning: Function components cannot be given refs.
Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
我试过下面的代码:
import React, { useState } from "react";
import { APP_NAME } from "../config";
import Link from "next/link";
import {
Collapse,
Navbar,
NavbarToggler,
NavbarBrand,
Nav,
NavItem,
NavLink,
} from "reactstrap";
const Header = () => {
const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(!isOpen);
return (
<div>
<Navbar color="light" light expand="md">
<Link href="/">
<NavbarBrand className="font-weight-bold">{APP_NAME}</NavbarBrand>
</Link>
<NavbarToggler onClick={toggle} />
<Collapse isOpen={isOpen} navbar>
<Nav className="m-auto" navbar>
<NavItem>
<Link href="/signup">
<NavLink style={{ cursor: "pointer" }}>Signup</NavLink>
</Link>
</NavItem>
<NavItem>
<Link href="/signin">
<NavLink style={{ cursor: "pointer" }}>Signin</NavLink>
</Link>
</NavItem>
</Nav>
</Collapse>
</Navbar>
</div>
);
};
export default Header;
请给我您宝贵的建议。
最简单的解决方案可能是使用原生 html 元素包装您的 NavLink。 在你的情况下:
<Link href="/signup" passHref>
<a>
<NavLink style={{ cursor: "pointer" }}>Signup</NavLink>
</a>
</Link>
来自官方文档: if-the-child-is-a-function- component 在Link
中包装自定义 function 组件时显示正确的方式。
Link
中添加passHref
属性。React.forwardRef
包装您的自定义 function 组件。 但是, NavbarBrand
不是您可以操作的组件。 您可以创建一个自定义组件来包装NavbarBrand
。 大概喜欢
const CustomNavbarBrand = React.forwardRef(({ onClick, href }, ref) => {
return (
<NavbarBrand href={href} onClick={onClick} ref={ref}>
Click Me
</NavbarBrand>
)
})
<Link href="/" passHref>
<CustomNavbarBrand>{APP_NAME}</CustomNavbarBrand>
</Link>
检查可以传递给NavbarBrand
的有效属性,因为我之前没有使用过reactstrap
。
这对我有用:
<Link href="/">
<div className="navbar-brand">
<a>{APP_NAME}</a>
</div>
</Link>
我没有使用 NavbarBrand 组件,而是添加了 class navbar-brand
将子组件包装在a
(anchor) 标记中解决了我的问题。
重现步骤:
Link
标签包裹组件从“下一个/链接”导入链接 从“下一个/图像”导入图像
<Link href="/">
<Image width="100%"
height="100%"
src="/logo.png"
alt="Blitztech Electronics Logo" />
<Link>
解决方案:
传递“重要” passHref
属性
将整个孩子包装在a
标签中
有一个更好的方法来解决这个问题:每当您要在 Link 标签下添加子标签时,例如 Image 标签,只需将它们包裹在 div 或标签下即可。 这是示例:
<Link href="/">
<div>
<Image
src={Logo}
alt={TagName.COMPANY_NAME}
width={80}
height={80}
onClick={handleClicked}
/>
</div>
</Link>
解决方案:
用锚标签(标签)包装
使用passHref属性
<Link href='/' passHref> <a> <Image src='logo.png' width="50px" height="50px" /> </a> </Link>
<Link href="/">
<a>{APP_NAME}</a>
</Link>
这对我有用。 只需将其包装在锚标签中
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.