问ReactJS不编译引导组件。仅返回HTML组件。0xerr011d
EN

Stack Overflow用户

提问于 2018-06-08 08:48:12

回答 1查看 46关注 0票数 3

我为赋值写了简单的代码。我指的是纪录片和几个youtube视频教程系列。我的react代码是正确的，我在运行代码时没有得到任何错误。但是这些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

这是我朋友写的。他告诉我这些代码完全可以在他的电脑上运行，没有任何问题。

javascript

reactjs

reactstrap

回答 1

Stack Overflow用户

发布于 2018-06-08 09:02:01

在React中，你必须使用className而不是class。

<div className="form-group">
   ...
</div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50751916

复制

相似问题

问ReactJS不编译引导组件。仅返回HTML组件。0xerr011d
EN

回答 1

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ReactJS不编译引导组件。仅返回HTML组件。0xerr011dEN

回答 1

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ReactJS不编译引导组件。仅返回HTML组件。0xerr011d
EN