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

Question

我是React的新手，我需要一点帮助。我尝试创建一个从props接收数据的组件，并自动创建必要的标签：

​

​

我使用的是来自MDBreact的MDBNav。

其想法是将数据( Test1、Test2、Test3、Test4)提取到用于mi navegación选项卡的Tabs的名称。

props.data是我让数据正确接收的地方。

这是我的代码，我不知道如何插入我的JSX并返回一个具有正确名称的MDBNav。

下面是我开始编写的代码：

import { MDBNav, MDBNavItem, MDBNavLink } from "mdbreact";


const MiTabs = props => {
  console.log(props.data);

  for (let key in props.data) {
    console.log(key, props.data[key]);
  }


return (

  <BrowserRouter>

    <MDBNav className="nav-tabs mt-5">
      <MDBNavItem>
        <MDBNavLink active to="#!">Active</MDBNavLink>
      </MDBNavItem>
      <MDBNavItem>
        <MDBNavLink to="#!">Link 1</MDBNavLink>
      </MDBNavItem>
      <MDBNavItem>
        <MDBNavLink to="#!">Link 2</MDBNavLink>
      </MDBNavItem>
      <MDBNavItem>
        <MDBNavLink to="#!">Link 3</MDBNavLink>
      </MDBNavItem>
    </MDBNav>

  </BrowserRouter>



  );
};

export default  MiTabs;

非常感谢。

Answer 1

这对我来说很有效：

return (

  <BrowserRouter>
    <MDBNav className="nav-tabs mt-5">

      {props.data.map(a => (
      <MDBNavItem>  <MDBNavLink to={a.enlace}>{a.nombre} </MDBNavLink>  </MDBNavItem>
      ))}

    </MDBNav>
  </BrowserRouter>

  );
};