Question

我正在尝试在我的反应项目中创建一个药丸导航栏，但我的链接不起作用，尽管它显示正在传递的ID。任何人都可以告诉我我的错误在哪里，或者为什么它不起作用？这是我的代码：

      render(){  
        return(
        <div className="searchContainer" dir="rtl">   
<ul className="nav nav-pills">
  <li className="active"><a data-toggle="pill" href="#home">Home</a></li>
  <li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
  <li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
</ul>

<div className="tab-content">
  <div id="home" className="tab-pane fade in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" className="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
  <div id="menu2" className="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
</div> 
            </div>          
        );
    }

    }

我已将这些脚本包含在app.jsx中：

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"/>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 1

我在react中创建了一个功能组件，它只包含你提供的标记和一些库

阵营
反应-DOM
bootstrap css
bootstrap js
jquery的

确保您使用所有这些js库，并且脚本排序也很重要。签入代码段。您也可以看到正在运行的代码。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div id="root"></div>

＆＃13;

FrameInfo(frame, filename, lineno, function, code_context,
  index)

＆＃13;

bootstrap中的药丸在反应项目中不起作用

1 个答案: