Question

我终于要实现一些我一直在用Bootstrap和React读到的东西。我开始了这个React教程： https://code.visualstudio.com/docs/nodejs/reactjs-tutorial 你好世界的应用程序工作正常。现在，我正在尝试向此hello world应用程序中插入一些引导程序代码，而我已经遇到了一些问题。我在head.tag中的index.html中添加了以下代码：

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;

但是，页面呈现时没有引导程序。它看起来像这样：三列之一三列之一三栏之一

Answer 1

class是JavaScript中的保留字，因此您不能在JSX中使用它。正确的语法是className。

Answer 2

class属性是一个JavaScript单词，因此React已经实现了className，这最终是一回事。您可以看一下React自己的文档：

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

对不起，我的英语：D

Bootstrap在React中不起作用

2 个答案: