React 和 Rails - Bootstrap 样式已投入生产

Question

我一直在关注 this 精彩教程 Rails & React Tutorial，在部署到生产环境后遇到了问题。引导样式/类未在生产中应用。这个问题似乎与this 类似，但发帖人的回答含糊不清。

这是本地主机上的主页图片：

这是制作时主页的图片：

首页代码如下，可以看到bootstrap类jumbotron等：

export default () => (
<div className="vw-100 vh-100 primary-color d-flex align-items-center justify-content-center">
  <div className="jumbotron jumbotron-fluid bg-transparent">
  <img style={imgstyle} src={require("../../assets/images/hk_banner.jpg")} alt="Image of HK" />
    <div className="container secondary-color">
      <h1 className="display-4">Minority Experiences: HK</h1>
      <p className="lead">
        Experiences of the underrepresented.
      </p>
      <hr className="my-4" />
      <div style={{display: "flex", justifyContent: "space-between"}}>
        <Link
          to="/read"
          className="btn btn-lg custom-button"
          role="button"
        >
          Read Experiences
        </Link>
        <Link
          to="/about"
          className="btn btn-lg custom-button"
          role="button"
        >
          About Website
        </Link>
      </div>
    </div>
  </div>
</div>
);

我知道这是一个引导样式问题，因为在我的应用中我也使用引导模式，但它也不起作用。

这就是我将引导程序链接到文件 /app/javascript/packs/Index.jsx 中的项目（根据教程）的方式：

import React from "react";
import { render } from "react-dom";
import 'bootstrap/dist/css/bootstrap.min.css';
import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import App from "../components/App";

document.addEventListener("DOMContentLoaded", () => {
  render(
    <App />,
    document.body.appendChild(document.createElement("div"))
  );
});

Answer 1

@Ayudh，您可以使用以下方式在 React 中使用 Bootstrap，尝试一下希望它能解决您的问题

1. 导航到项目的根文件夹并打开 public/index.html 文件，然后在该部分中添加以下代码：

   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
   

如果您需要在 React 应用程序中使用依赖于 JavaScript/jQuery 的 Bootstrap 组件，您还需要在文档中包含 jQuery、Popper.js 和 Bootstrap.js。在结束 </body> 标记之前添加 CDN。

1. 您还可以通过从 npm 安装来将 Bootstrap 导入您的 React 应用程序。

   $ npm install bootstrap --save

安装引导包后，您需要将其导入您的 React 应用入口文件。 打开 src/index.js 文件并添加以下代码：

import 'bootstrap/dist/css/bootstrap.min.css';

安装 Jquery

$ npm install jquery popper.js

接下来，转到 src/index.js 文件并添加以下导入：

import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';

就是这样。您现在可以在您的 React 应用程序中使用 Bootstrap 的全部功能。