使用 ReactJS,我正在使用来自 MDBreact 的 MDBNav。
这是定义 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;
一切正常,但“活动”的问题没有出现。
问题来自这里:
我使用的 CSS 是:
import 'mdbreact/dist/css/mdb.css';
import './css/bootstrap.css';
import '@fortawesome/fontawesome-free/css/all.min.css';
如果我从代码中删除活动选项,则所有选项卡始终处于活动状态。单击时我只需要一个活跃,但现在没有一个活跃。
从某个地方我收到了这个“活跃”的课程。我从哪里找到。如何调试这个问题?有任何想法吗?