React forEach 不在 TSX 中打印 HTML

Question

我正在使用与 TSX 和 SCSS 的反应

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

我正在尝试在 React 中做一个 Header 组件，我有一个 objects （链接）数组要添加到 header.

数组如下：

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

];

此链接实现了以下接口：

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 执行正确。问题来了，当这个循环不在屏幕上打印 ANYTHING 时。

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

提前致谢

Answer 1

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

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

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

Answer 2

问题可能是元素中没有内容。尝试 <Link>{link.title}</Link>

而不是 <Link />

React forEach 不在 TSX 中打印 HTML

React forEach not printing HTML in TSX

javascript

loops

jsx

reactjs

tsx