ReactJS 不编译 boostrap 组件。只返回 HTML 组件。 0xerr011d
Posted
技术标签:
【中文标题】ReactJS 不编译 boostrap 组件。只返回 HTML 组件。 0xerr011d【英文标题】：ReactJS not compiles boostrap components. only returns HTML components. 0xerr011d 【发布时间】：2018-11-17 23:59:39 【问题描述】：我为赋值编写了简单的代码。我参考了文档和几个 youtube 视频教程系列。我的反应代码是正确的，我在运行代码时没有遇到任何错误。但是这些 react-boostrap 元素没有渲染。此代码仅返回 html 输出。请看一下这段代码并帮助我解决这个问题。
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import BrowserRouter as Router, Route from 'react-router-dom';
import Login from './components/Login';
import Test from './text';
ReactDOM.render(
<Router>
<div>
<div>
<App/>
</div>
</div>
</Router>, document.getElementById('root'));
registerServiceWorker();<!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">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<title>React App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<noscript>
You need to enable javascript to run this app.
</noscript>
<div id="root"></div>
</body>
</html>这些是 index.html 和 index.js 页面。我认为这些足以发现问题。我将发布主管以及更多信息。
import React, Component from 'react';
import Switch, Route from 'react-router-dom'
import Logo from '../images/logo.png';
import Dashboard from './Dashboard';
import AdminList from './AdminList';
import ClientList from './ClientList';
import ServiceList from './ServiceList';
import AdminView from './AdminView';
import ClientView from './ClientView';
import ServiceView from './ServiceView';
import AdminNew from './AdminNew';
import ClientNew from './ClientNew';
import ServiceNew from './ServiceNew';
import Category from './Category';
import CategoryNew from './CategoryNew';
import Login from './Login';
import App from '../App';
const Main = () => (
<main>
<Switch>
<Route exact path='/' component=Dashboard />
<Route exact path='/login' component=Login/>
<Route path='/Category'
render=( match: url ) => (
<div>
<Route exact path=`$url/` component=Category />
<Route path=`$url/new` component=CategoryNew />
</div>
) />
<Route path='/Client'
render=( match: url ) => (
<div>
<Route exact path=`$url/` component=ClientList />
<Route path=`$url/new` component=ClientNew />
<Route path=`$url/view` component=ClientView />
</div>
) />
<Route path='/Service'
render=( match: url ) => (
<div>
<Route exact path=`$url/` component=ServiceList />
<Route path=`$url/new` component=ServiceNew />
<Route path=`$url/view` component=ServiceView />
</div>
) />
<Route path='/Admin'
render=( match: url ) => (
<div>
<Route exact path=`$url/` component=AdminList />
<Route path=`$url/new` component=AdminNew />
<Route path=`$url/view` component=AdminView />
</div>
) />
</Switch>
</main>
)
export default Main;Main.js
import React, Component from 'react';
import axios from 'axios';
class ServiceNew extends Component
constructor()
super();
this.state=
Name:'',
NIC:'',
Email:'',
Password:'',
Contact:'',
District:'',
Category:'',
this.handleNameChange=this.handleNameChange.bind(this)
this.handleNICChange=this.handleNICChange.bind(this)
this.handleEmailChange=this.handleEmailChange.bind(this)
this.handlePwdChange=this.handlePwdChange.bind(this)
this.handlePhoneChange=this.handlePhoneChange.bind(this)
this.handleDistrictChange=this.handleDistrictChange.bind(this)
this.handleCategoryChange=this.handleCategoryChange.bind(this)
this.handleClick=this.handleClick.bind(this)
handleNameChange(e)
this.setState(
Name:e.target.value
)
console.log(this.state.Name)
handleNICChange(e)
this.setState(
NIC:e.target.value
)
console.log(this.state.NIC)
handleEmailChange(e)
this.setState(
Email:e.target.value
)
console.log(this.state.Email)
handlePwdChange(e)
this.setState(
Password:e.target.value
)
console.log(this.state.Password)
handlePhoneChange(e)
this.setState(
Contact:e.target.value
)
console.log(this.state.Contact)
handleDistrictChange(e)
this.setState(
District:e.target.value
)
console.log(this.state.District)
handleCategoryChange(e)
this.setState(
Category:e.target.value
)
console.log(this.state.Category)
handleClick = event =>
event.preventDefault();
axios.post('http://localhost:4000/api/serviceproviders-insert',
name:this.state.Name,
_id:this.state.NIC,
email:this.state.Email,
password:this.state.Password,
contact:this.state.Contact,
district:this.state.District,
category:this.state.Category,
)
.then(res =>
alert("Successfully Registered");
console.log(res);
console.log(res.data)
this.setState=
Name:'',
NIC:'',
Email:'',
Password:'',
Contact:'',
District:'',
Category:'',
)
.catch(err=>
console.log(err)
)
render()
return (
<div>
<div>
<div class="well">
<a href="#" class="list-group-item list-group-item-danger"><h4><b>Add New</b></h4></a>
</div>
<form>
<div class="form-group">
<label for="name">Name:</label>
<input type="name" class="form-control" value=this.state.Name id="name" placeholder="Enter name" name="name" onChange=this.handleNameChange/>
</div>
<div class="form-group">
<label for="nic">NIC:</label>
<input type="nic" class="form-control" value=this.state.NIC id="nic" placeholder="Enter NIC" name="nic" onChange=this.handleNICChange/>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" value=this.state.Email id="email" placeholder="Enter email" name="email"onChange=this.handleEmailChange />
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control"value=this.state.Password id="pwd" placeholder="Enter password" name="pwd" onChange=this.handlePwdChange />
</div>
<div class="form-group">
<label for="phone">Contact No:</label>
<input type="phone" class="form-control" value=this.state.Contact id="phone" placeholder="Enter contact number" name="phone" onChange=this.handlePhoneChange />
</div>
<div class="form-group">
<label for="dis">District:</label>
<input type="dis" class="form-control" value=this.state.District id="dis" placeholder="Enter district" name="dis" onChange=this.handleDistrictChange />
</div>
<div class="form-group">
<label for="cat">Working Category:</label>
<input type="cat" class="form-control" value=this.state.Category id="cat" placeholder="Enter working category" name="cat" onChange=this.handleCategoryChange/>
</div>
<button type="button" onClick=this.handleClick class="btn btn-primary">Add New</button>
</form>
</div>
</div>
);
export default ServiceNew;ServiceNew.js
这东西是我朋友写的。他告诉我这段代码完全可以在他的电脑上运行，没有任何问题。
【问题讨论】：
className 而不是 class
【参考方案1】：
你必须在 React 中使用 className 而不是 class。
<div className="form-group">
...
</div>
【讨论】：
以上是关于ReactJS 不编译 boostrap 组件。只返回 HTML 组件。 0xerr011d的主要内容，如果未能解决你的问题，请参考以下文章