javascript - 表悬停( Bootstrap )不适用于 react

Question

我已经用 NPM 安装了 popper 和 jquery。

并在 App.js 中导入:

import '../node_modules/jquery/dist/jquery.min.js'
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import '../node_modules/bootstrap/dist/js/bootstrap.min.js';

css 部分似乎工作正常，但我没有看到任何 jquery(bootstrap.js) 在运行。当我使用表格时，表格条纹和表格悬停不起作用。这是我正在测试的代码，来自 Traversy Media(我粘贴在 App.js 的渲染中)。 class 和 className 我都试过了

<div className="container">
      <table className="table table-striped table-bordered table-hover table-condensed">
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Age</th>
        </tr>
        <tr class="danger">
          <td>Jill</td>
          <td>Smith</td>
          <td>50</td>
        </tr>
        <tr>
          <td>Eve</td>
          <td>Jackson</td>
          <td>24</td>
        </tr>
        <tr class="success">
          <td>John</td>
          <td>Doe</td>
          <td>34</td>
        </tr>
        <tr>
          <td>Stephanie</td>
          <td>Landon</td>
          <td>47</td>
        </tr>
        <tr>
          <td>Mike</td>
          <td>Johnson</td>
          <td>19</td>
        </tr>
      </table>
</div>

谢谢

Answer 1

您的表格中似乎缺少“tbody”标签。这是正确的标记:

<div className="container">
  <table className="table table-striped table-bordered table-hover table-condensed">
    <tbody>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
      </tr>
      <tr className="danger">
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>24</td>
      </tr>
      <tr className="success">
        <td>John</td>
        <td>Doe</td>
        <td>34</td>
      </tr>
      <tr>
        <td>Stephanie</td>
        <td>Landon</td>
        <td>47</td>
      </tr>
      <tr>
        <td>Mike</td>
        <td>Johnson</td>
        <td>19</td>
      </tr>
    </tbody>
  </table>
</div>

希望对您有所帮助。