React forEach不在TSX中打印HTML

问题描述

我正在使用TSX和SCSS进行反应

我之前已经搜索过，但找不到这个确切问题的答案，所以我认为没有重复。

我正在尝试在React中创建一个Header组件，并且我要在标头中添加一个对象（链接）数组。

该数组如下：

const menuLinks: menuLink[] = [
{
  title: "Home",path: "/",active: false,},{
  title: "about",path: "/about",

];

此链接实现以下接口：

interface menuLink {
  title: string;
  path: string;
  active: boolean;
  [propety: string]: any;
}

我正在尝试执行menuLinks.map(.....)来打印<nav></nav>内的所有链接。

正在使用的forEach是下一个：

return (
    <header className="header">
      <div className="logo"></div>
      <nav>
        {menuLinks.map((link,i) => {
          console.log("Entered",link);
          return <Link key={link.path + i} to={link.path} />;
        })}
      </nav>
    </header>
  );

我肯定知道循环执行的正确时间会导致console.log正确执行。问题出在此循环不在屏幕上显示任何内容时。

任何帮助或想法为何不起作用？我来自VueJS，而React不是我的专长。

预先感谢

解决方法

我认为问题出在<Link />中，没有内容，也许可以尝试：

<Link key={link.path + i} to={link.path}>{link.path}</Link>

除此以外，.map()似乎还不错。

,

问题可能是元素中没有内容。尝试使用<Link />

代替<Link>{link.title}</Link>