将 props.data 与 MDBNav 一起使用，如何激活活动的 TAB 或 LINK答案

【问题标题】：Using props.data with MDBNav, how to activate the active TAB or LINK将 props.data 与 MDBNav 一起使用，如何激活活动的 TAB 或 LINK
【发布时间】：2020-04-10 08:07:31
【问题描述】：

对于 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';

如果我从代码中删除活动选项，则所有选项卡始终处于活动状态。点击时我喊只激活一个，但现在没有一个激活。

我从某个地方收到了这个“活跃”的课程。我从哪里找到。如何调试这个问题？有什么想法吗？

【问题讨论】：

标签： javascript reactjs mdbootstrap mdbreact

【解决方案1】：

尝试将道具link 添加到MDBNavLink。 MDBNavLink 是来自react-router-dom 的NavLink，但在标签和药丸等组件中，您应该使用来自react-router-dom 的Link

检查这个解决方案：

    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;

这段代码现在应该可以正常工作了。

【讨论】：

【解决方案2】：

您需要指定active 选项，而不是activo：

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

通过执行 {a.active} 您只需将 true 添加到 MDBNavLink（这没有意义），您需要添加 active={true} 代替

【讨论】：

我试过了，但没有用。下面我添加了一个本地作为 MDBreact 示例，但不是 workig。现在我看到它是另一回事。感谢您的帮助。
@Kentron.dna 你是什么意思？
我已按照您的建议添加了它。还是行不通。但我也在添加原生方式：不使用 JS 也不工作。
我刚刚在新帖子中发布了所有详细信息。
您还需要将 key={a.nombre} 添加到 MDBNavItem