个人中心
gpt4 book ai didi

javascript - React JS 没有编译 Bootstrap 组件。只返回 HTML 组件。 0xerr011d

转载 作者：行者123 更新时间：2023-11-29 16:02:29 30 4
gpt4 key购买 nike

我为作业编写了简单的代码。我引用了文档和几个 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;

主要.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

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

最佳答案

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

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

关于javascript - React JS 没有编译 Bootstrap 组件。只返回 HTML 组件。 0xerr011d，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50751916/

30 4 0
文章推荐： javascript - 等待 window.location.href？
文章推荐： java - 无法打开 Hibernate session 进行事务；嵌套异常是 org.hibernate.exception
文章推荐： mysql - mysql 中获取员工最新时间列表的最佳查询是什么？
文章推荐： javascript - React 组件游戏未使用路由渲染
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com