reactjs - 使用 props.data 为我的 React proyect 自动构建一个 MDBNav

Question

我对 React 很陌生，我需要一点帮助。我尝试创建一个从道具接收数据并自动创建必要选项卡的组件：

我正在使用来自 MDBreact 的 MDBNav。

这个想法是将数据（Test1，Test2，Test3，Test4）获取到选项卡的名称，用于 mi navegación 选项卡。

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

这是我的代码，我不知道如何将我的 JSX 插入 for 并重新调整具有正确名称的 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>

  );
};