如何在 reactjs 中使用引导程序答案

【问题标题】：How to use bootstrap with reactjs如何在 reactjs 中使用引导程序
【发布时间】：2018-05-24 10:17:18
【问题描述】：

我是 React.js 的新手，自从我开始阅读文档和教程后，我不确定 Bootstrap 如何与 React.js 一起工作。

我看到了几个 npm 包，例如 reactstrap 或 react-bootstrap，但是，我不明白。 HTML 代码来自一个返回一段 HTML 的方法（像这样）：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

如果我是对的......

所以，我的问题是：

我应该将 Bootstrap 的 <link/> 或 <script/> 添加到 index.html 中，添加到正文中还是标题中？

或

我是否必须从我的 App.js 文件中包含 Bootstrap 并从方法中使用它？

PS：我已经开发多年了，但我从来没有做过任何 Javascript/HTML/CSS 网页，所以如果你有任何建议，提前谢谢！

我需要使用 Bootstrap 网格的逻辑来实现 HCI

感谢您的帮助

【问题讨论】：

您只需要在反应中添加 Bootstrap 对吗？如果是这样你需要在index.html中添加css cdn@
但是如果我从我的index.html添加，如何从js端使用呢？

标签： html reactjs bootstrap-4

【解决方案1】：

要回答您的问题，您对问题的两个建议都是正确的。无论哪种方式，你都可以做到。

在您的index.html 中包含bootstrap CDN
您可以使用npm/yarn 添加引导程序包，例如React-Bootstrap，并将所需的组件导入您的App.js

如果您首先这样做，您需要做的就是在index.html 中添加您的Bootstrap CDN，当您使用 Javascript 访问您的课程时，它会正常工作

注意：在 react 中访问类时使用 className 而不是 class

这是一个如何在index.html 中添加 CDN 的示例

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ''
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({
      value: event.target.value
    });
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return ( 
    <div>
      <form onSubmit = {this.handleSubmit} >
        <label>
          Name:
        </label> 
        <input type = "text" className="form-control"
          value = {this.state.value}
          onChange = {this.handleChange}/> 
        <input type = "submit"
          value = "Submit" className="btn btn-primary"/>
     </form> 
   </div>
    );
  }
}

ReactDOM.render( < App / > , document.getElementById('root'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<div id='root'></div>

编辑：- 假设你按照Official Installation安装了React

使用以下文件结构

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/style/style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>        
    <!-- And then your bundled js -->
  </head>
  <body>
    <div class="container"></div>
  </body>
  <script src="/bundle.js"></script>
</html>

index.js

import React from 'react';
import ReactDOM from 'react-dom';

import App from './components/app'; //Make sure it's the path to your App.js

ReactDOM.render(
    <App />
  , document.querySelector('.container'));

src/components/app.js

import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <div>
        <form onSubmit = {this.handleSubmit} >
          <label>
            Name:
          </label> 
          <input type = "text" className="form-control"
            value = {this.state.value}
            onChange = {this.handleChange}/> 
          <input type = "submit"
          value = "Submit" className="btn btn-primary"/>
        </form> 
      </div>
    );
  }
}

检查一下，它应该可以工作。

【讨论】：

你能指定你把代码放在哪里（确切地）吗？我将第一部分放入App.js，将第二部分放入intel.html 的正文中，但设计看起来不像你的：/
你是怎么安装react的？如果是根据官方文档，那么你在App.js 中添加第一部分，在index.html 中添加第二部分。但是您需要弄清楚，因为您可能需要对index.js 进行一些更改。如果你能把你的代码放在 github 上，我可以看到它并对其进行一些必要的更改，那就更好了。
@DhavalJardosh，嗨 Dhaval，我只是想问一下，我们应该使用哪种方式才能在 React 项目中使用 Bootstrap。是不是我们在开发过程中需要使用 Bootstrap cdn，但是在生产过程中我们需要使用安装在 React 项目中的 bootstrap 包。请您提供您的专业建议。谢谢你。愿你平安:)
@Dickens，对不起，我忙于某事。您可以在生产中使用 CDN 或参考下载的 Bootstrap CSS 和 JS 文件。 Bootstrap 得到 Twitter 的支持，因此他们在不久的将来弃用 bootstrap CDN 的可能性较小，但如果你想安全起见，你可以下载这些软件包，或者正如我在答案中提到的那样，也可以使用 react-bootstrap
我会下载软件包并使用它而不是 CDN :)