Reactjs React render{[key:string]：object} 从“React”导入React； 界面道具{ 链接：{ [键：字符串]：链接 }; } 接口链接{ 名称：字符串； url:string； 图标：字符串； } 导出默认函数标题（道具：道具）{ const{links}=props； 返回( {链接？ Object.entries（links）.map（（link:any）=> link+“”+link.url ) : '' } ); }

我正在渲染

home，[object object]未定义

但是如何渲染

home/home

最后它应该是一个

元素

---

或者通常有更好的方法来实现接口/组件吗？

对象。条目

为您提供了一个键值对。因为您只需要输入值，所以只需使用

Object.values

import React from "react";

interface Props {
  links: {
    [key: string]: Link
  };
}

interface Link {
  name: string;
  url: string;
  icon: string;
}

export default function Header(props: Props) {
  const { links } = props;
  return (
    <header className="header">
      <nav>
        <ul>
          { links ?
            Object.entries(links).map((link: any) =>
              link + ' ' + link.url
            )
            : ''
           }
        </ul>
      </nav>
    </header>
  );
}

<Header links={
  { "home": {
      name: 'Home',
      url: '/home',
      icon: 'faHome'
    }
  }
}/>

export default function Header(props: Props) {
  const { links } = props;
  return (
    <header className="header">
      <nav>
        <ul>
          { links ?
            Object.values(links).map((link: any) =>
              <a href={link.url}>{link.name}</a>
            )
            : ''
           }
        </ul>
      </nav>
    </header>
  );
}

export default function Header(props: Props) {
  const { links } = props;
  return (
    <header className="header">
      <nav>
        <ul>
          { links ?
            Object.entries(links).map(([key, link]) =>
              <a href={link.url}>{link.name}</a>
            )
            : ''
           }
        </ul>
      </nav>
    </header>
  );
}