我正在使用 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;
请给我您宝贵的建议。
答案 0 :(得分:2)
来自官方文档:if-the-child-is-a-function-component 显示了在 Link
中包装自定义函数组件时的正确方法。
passHref
中添加 Link
属性。React.forwardRef
包裹您的自定义函数组件。但是,NavbarBrand
不是您可以操作的组件。您可以创建自定义组件来包装 NavbarBrand
。大概喜欢
const CustomNavbarBrand = React.forwardRef(({ onClick, href }, ref) => {
return (
<NavbarBrand href={href} onClick={onClick} ref={ref}>
Click Me
</NavbarBrand>
)
})
<Link href="/">
<CustomNavbarBrand>{APP_NAME}</CustomNavbarBrand>
</Link>
检查可以传递给 NavbarBrand
的有效属性,因为我之前没有使用过 reactstrap
。
答案 1 :(得分:1)
这对我有用:
<Link href="/">
<div className="navbar-brand">
<a>{APP_NAME}</a>
</div>
</Link>
我没有使用 NavbarBrand 组件,而是添加了类 navbar-brand
答案 2 :(得分:0)
最简单的解决方案可能是用原生 html 元素包装您的 NavLink。在你的情况下:
<Link href="/signup" passHref>
<a>
<NavLink style={{ cursor: "pointer" }}>Signup</NavLink>
</a>
</Link>