Bootstrap React 应用中的导航

Question

我正在尝试在 React + Electron 应用程序中实现 Bootstrap 导航。

这是我写的 JSX 代码：

render: function () {
  if (this.state.loading) {
    return (
      <div className="jumbotron">
        <h1 className="display-3">Let us load your data</h1>
        <p>It may take a while</p>
      </div>
    );
  }

  return (
    <div>
      <ul className="nav nav-pills nav-stacked">
        <li role="presentation" className="active">
          <a href="#">
            Home
          </a>
        </li>
        <li role="presentation">
          <a href="#">
            Profile
          </a>
        </li>
      </ul>
    </div>
  );
}

这是呈现的内容：

nav-pills、nav-stacked 和 active 类似乎没有呈现。

我也试过渲染 table:

return (
  <div>
    <table className="table table-striped table-bordered">
      <tbody>
        <tr>
          <th>1</th>
          <th>2</th>
          <th>3</th>
        </tr>
        <tr>
          <td>4</td>
          <td>5</td>
          <td>6</td>
        </tr>
        <tr>
          <td>7</td>
          <td>8</td>
          <td>9</td>
        </tr>
      </tbody>
    </table>
  </div>
);

这一个按预期工作：

是否有任何原因导致导航不起作用？

Answer 1

尝试使用 react-bootstrap.link - https://react-bootstrap.github.io/

Answer 2

该项目使用的是 Bootstrap 4 而不是我想的 Bootstrap 3...

Bootstrap React 应用中的导航

Bootstrap nav inside a React app

twitter-bootstrap

reactjs

twitter-bootstrap-3

electron