使用props.data自动构造我的React项目的MDBNav

import React from 'react';
import { MDBNav, MDBNavItem, MDBNavLink } from 'mdbreact';

const MyNav = (props) => {
  // 在这里使用props.data构造导航栏
  return (
    <MDBNav>
      {/* 使用map函数遍历props.data数组 */}
      {props.data.map((item, index) => (
        <MDBNavItem key={index}>
          <MDBNavLink to={item.link}>{item.title}</MDBNavLink>
        </MDBNavItem>
      ))}
    </MDBNav>
  );
}

const App = () => {
  // 定义导航栏的数据
  const navData = [
    { title: '首页', link: '/' },
    { title: '关于我们', link: '/about' },
    { title: '产品', link: '/products' },
    // 其他导航栏项...
  ];

  return (
    <div>
      {/* 使用MyNav组件，并传入props.data */}
      <MyNav data={navData} />
      {/* 其他组件和内容 */}
    </div>
  );
}