Bootstrap 在 React 中不起作用答案

【问题标题】：Bootstrap won't work in ReactBootstrap 在 React 中不起作用
【发布时间】：2018-12-25 13:03:34
【问题描述】：

我终于尝试使用 Bootstrap 和 React 来实现我一直在阅读的一些内容。我开始了这个 React 教程： https://code.visualstudio.com/docs/nodejs/reactjs-tutorial hello world 应用程序运行良好。现在我正在尝试将一些引导代码插入到这个 hello world 应用程序中，我已经遇到了问题。我在我的 index.html 的 head 标签中添加了这段代码：

Index.html 代码如下所示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link href="css.site.css" rel="stylesheet">
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->

    <title>React App - Test Title</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

另外，App.js 文件看起来像这样（使用 React）

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <body>
      <div className="container">
      <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
      </div>
      </body>
    );
  }
}

export default App;

但是，页面在没有引导的情况下呈现。它看起来像这样：三列之一三列之一三列之一

【问题讨论】：

使用className 而不是class

标签： javascript reactjs twitter-bootstrap

【解决方案1】：

class 是 JavaScript 中的保留字，所以你不能在 JSX 中使用它。正确的语法是className。

【讨论】：

啊！所以我将每个 div 属性更改为“className”：它仍在渲染堆叠，而不是作为引导列。

【解决方案2】：

class属性是一个javascript词，所以React实现了className，到底是一回事。你可以看看 React 自己的文档：

https://reactjs.org/docs/dom-elements.html#classname

对不起我的英语：D

【讨论】：

我将所有类名更改为 className ，但我仍然遇到同样的错误。该行正在堆叠。有什么想法吗？