问题
With ReactJS i am using MDBNav from MDBreact.
This is the code od the container where is props.data defined:
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;
This is the component code:
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;
Every thing is working but there is a problem with "active" is not showing up.
The problem is coming from here:
The CSS I am using is:
import 'mdbreact/dist/css/mdb.css';
import './css/bootstrap.css';
import '@fortawesome/fontawesome-free/css/all.min.css';
If i remve the active option from the code is always active all the tabs. I shoutl be active on ly one when cliked, but now no one is active.
From somehere i receiveig this "active" class. I din´t find from where. How to debug this problem? Any ideas?
回答1:
Try to add prop link
to MDBNavLink
. MDBNavLink is a NavLink
from react-router-dom
, but in a component like tabs and pills you should use Link
from react-router-dom
Check this solution:
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;
This code should work properly now.
回答2:
You need to specify the active
option, not activo
:
<MDBNavItem key={a.nombre}><MDBNavLink active={a.activo} to={a.enlace}>{a.nombre} </MDBNavLink></MDBNavItem>
By doing {a.active} you just add true
to MDBNavLink (which doesn't make sense), you need to add active={true}
instead
来源:https://stackoverflow.com/questions/60846194/using-props-data-with-mdbnav-how-to-activate-the-active-tab-or-link