如何在reactjs中使用bootstrap

Question

如何在reactjs中使用bootstrap

我是 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>
    );
  }
}

Run Code Online (Sandbox Code Playgroud)

如果我是对的...

所以，我的问题是：

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

或者

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

PS：我已经开发多年了，但我从未做过任何 Javascript/HTML/CSS 网络，所以如果您有任何建议，请提前致谢！

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

谢谢你的帮助

Answer 1

Dha*_*osh 5

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

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

如果您采用第一种方式，您需要做的就是添加Bootstrap CDNindex.html，当您在 Javascript 中访问您的类时，它将正常工作

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

以下是如何在您的应用程序中添加 CDN 的示例index.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 ( 
    <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'));

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

编辑：- 假设您根据官方安装安装了 React

使用以下文件结构

索引.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>

Run Code Online (Sandbox Code Playgroud)

索引.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'));

Run Code Online (Sandbox Code Playgroud)

src/组件/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>
    );
  }
}

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	7 年，11 月前
查看次数：	5403 次
最近记录：	4 年，7 月前