React(TypeScript)中如何正确向Navbar组件传递接口Props？

首先看你的HeaderResponsiveProps接口，要求links是一个包含多个对象的数组，每个对象必须有link（字符串类型）和label（字符串类型）两个属性。

你只需要在App组件里定义一个符合这个结构的数组，然后把它作为props传给Navbar即可，具体代码实现如下：

Navbar组件（保持你的原有代码） #

interface HeaderResponsiveProps {
  links: { link: string; label: string }[];
}
export default function Navbar({ links }: HeaderResponsiveProps) {
  // 这里写Navbar的渲染逻辑，比如遍历links生成导航项
  return (
    <nav>
      {links.map((item, index) => (
        <a key={index} href={item.link}>{item.label}</a>
      ))}
    </nav>
  );
}

App组件（修改后传递props） #

import Navbar from './components/Navbar'

export default function App() {
  // 定义符合接口要求的links数组
  const navLinks = [
    { link: '/home', label: '首页' },
    { link: '/about', label: '关于我们' },
    { link: '/contact', label: '联系我们' }
  ];

  return (
      <Navbar links={navLinks}/>
  );
}

这样做的好处是，TypeScript会自动帮你校验navLinks的结构是否符合HeaderResponsiveProps的要求，如果少了link或label，或者类型不对，编辑器会直接报错，避免你传错数据。

内容的提问来源于stack exchange，提问作者kcrutch