javascript - 如何激活 MDBreact 的 MDBNav 中的活动 TAB 或 LINK。？

Question

这是我的代码：

import React from "react";
import { BrowserRouter } from 'react-router-dom';
import { MDBNav, MDBNavItem, MDBNavLink } from "mdbreact";

const MiTabs = props => {

return (

  <BrowserRouter>
    <MDBNav className="nav-tabs mt-5">
    {props.data.map(a => (
      <MDBNavItem>  <MDBNavLink active='true' to={a.enlace}>{a.nombre} </MDBNavLink>  </MDBNavItem>
      ))}

      <MDBNavItem>
        <MDBNavLink  active to="#!">Active</MDBNavLink>
      </MDBNavItem>
      <MDBNavItem>
        <MDBNavLink to="#!">NO Active</MDBNavLink>
      </MDBNavItem>

    </MDBNav>

  </BrowserRouter>

  );
};

export default  MiTabs;

活动选项卡不起作用：

我的 props.data 的内容：

class VpnList extends React.Component {
  state = {
    vpn: [
      {
        nombre: 'Test1',
        activo: true,
        enlace: '#!',
      },
      {
        nombre: 'Test2',
        activo: false,
        enlace: '#!',
      },
      {
        nombre: 'Test3',
        activo: false,
        enlace: '#!',
      },
      {
        nombre: 'Test4',
        activo: false,
        enlace: '#!',
      }
    ]
  };

我正在使用来自 MDBreact 的选项卡：

知道可能是什么问题吗？

谢谢

我使用来自 react bootstrap 的默认完整 css。根据 MDB 的反应，css 是：.nav-tabs

在我的 index.js 中：
import 'mdbreact/dist/css/mdb.css';

而在我的

App.js：导入'./css/bootstrap.css'；

如何解决这个问题？

Answer 1

我给你做了一个例子。我使用 React Hooks 而不是类组件，但逻辑是相同的。

import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import { MDBNav, MDBNavItem, MDBNavLink } from 'mdbreact';

export default function MITabs() {
  const data = [
    {
      nombre: 'Test1',
      activo: true,
      enlace: '/test1'
    },
    {
      nombre: 'Test2',
      activo: false,
      enlace: '/test2'
    },
    {
      nombre: 'Test3',
      activo: false,
      enlace: '/test3'
    },
    {
      nombre: 'Test4',
      activo: false,
      enlace: '/test4'
    }
  ];

  const [activated, setActivated] = React.useState(0);
  const toggleActivated = index => activated !== index && setActivated(index);

  return (
    <BrowserRouter>
      <MDBNav className='nav-tabs mt-5'>
        {data.map((a, index) => (
          <MDBNavItem key={a + index}>
            <MDBNavLink
              to={a.enlace}
              active={activated === index}
              onClick={() => toggleActivated(index)}
              role='tab'
            >
              {a.nombre}
            </MDBNavLink>
          </MDBNavItem>
        ))}

        <MDBNavItem>
          <MDBNavLink active to='#!'>
            Active
          </MDBNavLink>
        </MDBNavItem>
        <MDBNavItem>
          <MDBNavLink to='#!'>NO Active</MDBNavLink>
        </MDBNavItem>
      </MDBNav>
    </BrowserRouter>
  );
}