как активировать активную вкладку или ссылку в MDBNav MDBreact.? - PullRequest
Новая
       19

как активировать активную вкладку или ссылку в MDBNav MDBreact.?

0 голосов
/ 26 марта 2020

Это мой код: 

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;

Активная вкладка не работает:

enter image description here

Содержимое моего реквизита .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:

enter image description here

Есть идеи, что может быть проблемой?

Спасибо

Я использую стандартное завершение css от реакции bootstrap. Согласно постановлению MDB css - это: .nav-tabs

В моем индексе. js:
import 'mdbreact / dist / css / mdb. css';

А в моем

приложении. js: import './css/bootstrap.css';

Как решить этот пронлем?

1 Ответ

0 голосов
/ 02 апреля 2020

Я сделал пример для вас. Я использовал React Hooks вместо компонентов класса, но логика c такая же. 

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>
  );
}
...