响应标头实现(以Mantine )

Question

我刚开始反应(特别是打字稿)，我想知道如何将这些接口道具正确地传递给我的主应用程序中的Navbar组件？

interface HeaderResponsiveProps {
  links: { link: string; label: string }[];
}
export default function Navbar({ links }: HeaderResponsiveProps) {

import Navbar from './components/Navbar'

export default function App() {
  return (

      <Navbar links={???}/>
  );
}

Answer 1

您必须在Navbar组件中传递它，如下所示：

function Navbar(props: HeaderResponsiveProps ) { [your component] }

交替使用destructure就像：

function Navbar({ links }: HeaderResponsiveProps ) { [your component] }