我是 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>
);
}
}
如果我是对的......
所以，我的问题是:
- 我应该添加
<link/>吗？或<script/>将 Bootstrap 放入 index.html，放入正文或标题？
或
- 我是否必须从我的
App.js中包含 Bootstrap？文件并从方法中使用它？
PS:我已经开发多年了，但我从未做过任何 Javascript/HTML/CSS web，所以如果您有任何建议，请提前致谢!
我需要使用Bootstrap网格的逻辑来实现一个HCI
感谢您的帮助
最佳答案
要回答您的问题，您对问题的两个建议都是正确的。您可以采用任何一种方式。
- 在您的
index.html中包含bootstrap CDN - 您可以添加 Bootstrap 包，例如 React-Bootstrap使用
npm/yarn并将所需的组件导入到你的App.js
如果您采用第一种方式，您需要做的就是添加您的 Bootstrap CDN在 index.html 中，当您使用 Javascript 访问您的类时，它会正常工作
NOTE: While accessing class in react use
classNameand notclass
这是一个如何在 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'));<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>
);
}
}
检查一下，它应该可以工作。
关于html - 如何使用 bootstrap 和 reactjs，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47743653/