Используя props.data с MDBNav, как активировать активную вкладку или ссылку - PullRequest
Новая
       18

Используя props.data с MDBNav, как активировать активную вкладку или ссылку

1 голос
/ 25 марта 2020

С ReactJS я использую MDBNav из MDBreact.

enter image description here

Это код контейнера, в котором определен props.data: 

import React from 'react'
import MiTabs from "../componentes/MiTabs";

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: '#!',
      }
    ]
  };
  render() {
    return (
      <div>
        {/*
        <MiTabs data={this.state.vpn} /> <br />
        <h2> Create an article </h2>
        <CustomForm requestType="post" articleID={null} btnText="Create" />
        */}
        <MiTabs  data={this.state.vpn}/>



      </div>
    );
  }
}
export default  VpnList;

Это код компонента: 

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 key={a.nombre}>  <MDBNavLink 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

CSS Я использую: 

import 'mdbreact/dist/css/mdb.css';
import './css/bootstrap.css';
import '@fortawesome/fontawesome-free/css/all.min.css';

Если я получаю активную опцию из код всегда активен на всех вкладках. Я буду активен только один раз, когда кликаю, но теперь никто не активен.

Откуда-то я получаю этот "активный" класс. Я не могу найти откуда. Как отладить эту проблему? Есть идеи?

Ответы [ 2 ]

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

Попробуйте добавить опору link к MDBNavLink. MDBNavLink представляет собой NavLink из react-router-dom, но в таком компоненте, как вкладки и таблетки, следует использовать Link из react-router-dom

Проверьте это решение: 

    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> 
   //Add a link prop to component below
             <MDBNavLink link active='true' to={a.enlace}>
                {a.nombre} 
             </MDBNavLink>  
          </MDBNavItem>
          ))}

          <MDBNavItem>
   //Add a link prop to component below
            <MDBNavLink link active to="#!">Active</MDBNavLink>
          </MDBNavItem>
          <MDBNavItem>

   //Add a link prop to component below
            <MDBNavLink link to="#!">NO Active</MDBNavLink>
          </MDBNavItem>

        </MDBNav>

      </BrowserRouter>

      );
    };

    export default  MiTabs;

Этот код должен работать правильно сейчас.

1 голос
/ 25 марта 2020

Вам нужно указать опцию active, а не activo: 

<MDBNavItem key={a.nombre}><MDBNavLink active={a.activo} to={a.enlace}>{a.nombre} </MDBNavLink></MDBNavItem>

Делая {a.active}, вы просто добавляете true в MDBNavLink (что не имеет смысла) , вам нужно добавить active={true} вместо

...