如何在 reactjs 中使用引导程序
Posted
技术标签:
【中文标题】如何在 reactjs 中使用引导程序【英文标题】：How to use bootstrap with 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端使用呢？
【参考方案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 :)以上是关于如何在 reactjs 中使用引导程序的主要内容，如果未能解决你的问题，请参考以下文章