如何激活MDBreact的MDBNav中的活动标签或链接。

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的Tabs：

​

​

你知道问题出在哪里吗？

谢谢

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

在我的index.js中：

导入'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>
  );
}