我在NextJS项目中实现GatsbyJS项目中的头文件,并收到以下错误消息:
“错误:失败的属性类型:属性href
需要<Link>
中的string
或object
,但得到的却是undefined
。”
从header.jsx中删除以下内容时,不会提供任何错误消息:〈菜单按钮项={{图标:“/图片/图标/汉堡包. svg”}} /〉
你能告诉我我做错了什么吗?
这是我的头文件.jsx:
import React, { useEffect, useRef, useState } from "react";
import styled from "styled-components";
import Link from "next/link";
import { menuData } from "../../data/menuData";
import MenuButton from "../buttons/MenuButton.jsx";
import Image from "next/image";
import MenuTooltip from "../tooltips/MenuTooltip";
export default function Header() {
const [isOpen, setIsOpen] = useState(false);
const ref = useRef();
const tooltipRef = useRef();
function handleClick(event) {
setIsOpen(!isOpen);
event.preventDefault();
}
function handleClickOutside(event) {
if (
ref.current &&
!ref.current.contains(event.target) &&
!tooltipRef.current.contains(event.target)
) {
setIsOpen(false);
}
}
useEffect(() => {
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, []);
return (
<Wrapper>
<Link href="/">
<Logo>
<Image
src="/images/logos/logo.png"
alt="Logo"
width={120}
height={100}
/>
</Logo>
</Link>
<MenuWrapper count={menuData.length} ref={ref}>
{menuData.map((item, index) => (
<MenuButton key={index} item={item} />
))}
<HamburgerWrapper onClick={(event) => handleClick(event)}>
<MenuButton item={{ icon: "/images/icons/hamburger.svg" }} />
</HamburgerWrapper>
</MenuWrapper>
<div ref={tooltipRef}>
<MenuTooltip isOpen={isOpen} />
</div>
</Wrapper>
);
}
这是我的menuTooltip.jsx文件:
import React from "react";
import styled from "styled-components";
import { tooltipData } from "../../data/menuData";
import MenuButton from "../buttons/MenuButton";
export default function MenuTooltip(props) {
const { isOpen } = props;
return (
<Wrapper isOpen={isOpen}>
{tooltipData.map((item, index) => (
<MenuButton key={index} item={item} />
))}
</Wrapper>
);
}
这是我的MenuButton.jsx文件:
import React from "react";
import styled from "styled-components";
import Link from "next/link";
import { Caption } from "../styles/TextStyles";
export default function MenuButton(props) {
const { item } = props;
return (
<Link href={item.link} onClick={props.onClick} key={props}>
<MenuItem hasTitle={!item.title ? false : true}>
<img src={item.icon} />
{item.title}
</MenuItem>
</Link>
);
}
这是我的menuData.jsx文件:
export const menuData = [
{ title: "Learn", icon: "/images/icons/learner02_dm.svg", link: "/learn" },
{
title: "Articles",
icon: "/images/icons/article_light.svg",
link: "/articles",
},
{
title: "Community",
icon: "/images/icons/community_light.svg",
link: "/community",
},
{
title: "Entrepreneurs",
icon: "/images/icons/business02_light.svg",
link: "/entrepreneurs",
},
];
export const footerMenuData = [
{ title: "Learn", icon: "/images/icons/learner02_dm.svg", link: "/learn" },
{
title: "Articles",
icon: "/images/icons/article_light.svg",
link: "/articles",
},
{
title: "Community",
icon: "/images/icons/community_light.svg",
link: "/community",
},
{
title: "Entrepreneurs",
icon: "/images/icons/business02_light.svg",
link: "/entrepreneurs",
},
{
title: "Updates",
icon: "/images/icons/calendar_light.svg",
link: "/updates",
},
{
title: "Help",
icon: "/images/icons/help_light.svg",
link: "/help",
},
];
export const tooltipData = [
{ title: "Learn", icon: "/images/icons/learner02_dm.svg", link: "/learn" },
{
title: "Articles",
icon: "/images/icons/article_light.svg",
link: "/articles",
},
{
title: "Community",
icon: "/images/icons/community_light.svg",
link: "/community",
},
{
title: "Entrepreneurs",
icon: "/images/icons/business02_light.svg",
link: "/entrepreneurs",
},
];
2条答案
按热度按时间ar7v8xwq1#
在链接中添加标记a,如下所示:
我也经常得到这个错误...
mwecs4sa2#
哦,天哪!我被这个问题困扰了这么久,终于设法解决了它。虽然我很高兴这个被接受的答案对你有用,但很遗憾它对我没用。所以,我在这里留下了我在NextJS官方GitHub repo的讨论线程上找到的修复方法。
而不是将链接密钥直接传递到
Link
的href
属性中:以字符串形式传递,如下所示:
如果需要,您可以将
Link
组件的子组件 Package 在<a>
标记中,但这不是必需的,我的组件没有这个标记也能正常工作。仅供参考,我在Link
组件中有一些SVG图标,这些图标造成了所有这些麻烦。