React.js导入自定义组件文件时出现意外令牌错误

loading...


0

我已经阅读了许多关于“意外令牌”的现有React.js帖子,但这些建议似乎都没有帮助 . 所以我发布了有关此错误的另一个问题 .

我是React开发的新手,当我尝试导入呈现自定义表组件的'.js'文件时,我收到错误 .

这是我的index.js文件

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

我的app.js文件

import React, { Component } from 'react';
import logo from './th.jpg';
import './App.css';

import Table2 from '../components/table.js'

import Axios from 'axios'


import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
import '../node_modules/react-bootstrap-table/css/react-bootstrap-table.css';


const Card = (props) => {
    return (
    <div style={{margine: '1em', float: 'left'}}>
        <img width='75' src={props.avatar_url} alt="Not Available" />
      <div style={{display: 'inline-block', marginLeft: 10, color: 'red'}}>
        <div style={{fontSize: '1.25em', fontWeight: 'bold', color: 'blue'}}>
            {props.name}
        </div>
        <div>{props.company}</div>
      </div>
    </div>
  );
};

const PetInfo = (props) => {
  return (
    <div>
      <div key={props.id} style={{margine: '1em', float: 'left'}}> 
        <div style={{margine: '10em', float: 'left', paddingLeft: '2px'}}>{props.name}</div>
        <div style={{margine: '10em', float: 'left', paddingLeft: '2px'}}>{props.type}</div>
        <div style={{margine: '10em', float: 'left', paddingLeft: '2px'}}>{props.breed}</div>
        <div style={{margine: '10em', float: 'left', paddingLeft: '4px'}}>{props.location}</div>
        <div style={{margine: '10em', float: 'left', paddingLeft: '4px'}}>{props.logitude}</div>
        <div style={{margine: '10em', float: 'left', paddingLeft: '4px'}}>{props.latitude}</div>
        

</div> <div style={{clear: 'both'}}></div> </div> ); } const CardList = (props) => { return ( <div style={{margine: '1em', float: 'left'}}> {props.cards.map(cards => <Card {...cards}/>)} </div> ); }; const PetInfoList = (props) => { return ( <div> {props.petinfos.map(petinfos => <PetInfo {...petinfos}/>)} </div> ); } class Form extends React.Component { state = { userName: '' } userNameInput; handleSubmit = (event) => { event.preventDefault(); //console.log('Event Submit', this.state.userName); // Retrieve a single user fro GitHub API ... could use Ajax Call // but this environment comes with axios installed, so use that Axios.get('https://api.github.com/users/' + this.state.userName) .then(resp => { this.props.onSubmit(resp.data); }); }; render() { return ( <form onSubmit={this.handleSubmit} style={{margine: '1em', float: 'left'}}> <input type="text" value={this.state.userName} onChange={(event) => this.setState({ userName: event.target.value })} placeholder="GitHub Username" required/> <button type="submit">Add Card</button> </form> ); } } class Table1 extends Component { render() { return ( <div> <BootstrapTable data={this.props.data}> <TableHeaderColumn isKey dataField='_id'>ID </TableHeaderColumn> <TableHeaderColumn dataField='name'>Name </TableHeaderColumn> <TableHeaderColumn dataField='type'>Type </TableHeaderColumn> <TableHeaderColumn dataField='breed'>Breed </TableHeaderColumn> <TableHeaderColumn dataField='location'>Location </TableHeaderColumn> <TableHeaderColumn dataField='logitude'>Longitude </TableHeaderColumn> <TableHeaderColumn dataField='latitude'>Latitude </TableHeaderColumn> </BootstrapTable> </div> ); } } class App extends Component { state = { cards: [], petinfos: [] } addNewCard = (cardInfo) => { //console.log(cardInfo); this.setState(prevState => ({ cards: prevState.cards.concat(cardInfo) })); console.log('test'); }; componentDidMount() { this.GetPetList(); } GetPetList() { Axios.get('http://localhost:8000/api/petinfos') .then(resp => { console.log(resp); this.setState({ petinfos: resp.data }); //this.state.petinfos = resp.data; }); console.log(this.state.petinfos); }; render() { return ( <div className="App" style={{flex: .75}}> <div className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <h2>Welcome to the Pet Weather Application</h2> </div> <div> <Form onSubmit={this.addNewCard}/> <CardList cards={this.state.cards} />

<PetInfoList petinfos={this.state.petinfos} /> </div>

<div> <div style={{float: 'left', flex: .25}} /> <div style={{float: 'left', flex: .75}}> <p className="Table-header">Basic Table</p> <Table1 data={this.state.petinfos} /> </div> <div style={{float: 'left', flex: .25}} /> </div> </div> ); } } export default App;
  • 我为所有看似无关的代码道歉,但我稍后会要求它 .

这是我试图导入的table.js文件

import React from 'react';
import { Component } from 'react';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
import '../node_modules/react-bootstrap-table/css/react-bootstrap-table.css';


class Table2 extends React.Component {
    render() {
        return (
            <div className='table'>
                <BootstrapTable data={this.props.data}>
                    <TableHeaderColumn isKey dataField='id'>
                    </TableHeaderColumn>
                    <TableHeaderColumn dataField='name'>
                    </TableHeaderColumn>
                    <TableHeaderColumn dataField='type'>
                    </TableHeaderColumn>
                    <TableHeaderColumn dataField='breed'>
                    </TableHeaderColumn>
                    <TableHeaderColumn dataField='location'>
                    </TableHeaderColumn>
                    <TableHeaderColumn dataField='logitude'>
                    </TableHeaderColumn>
                    <TableHeaderColumn dataField='latitude'>
                    </TableHeaderColumn>                                        
                </BootstrapTable>
            </div>
        );
    }
}

export default Table2;

如果Table2的导入被注释掉,那么应用程序可以正常工作 . 如果取消注释导入,则会收到以下错误...

./components/table.js中的错误模块解析失败:C:\ Node_Express \ PetWeatherApp \ pet-weather-app \ components \ table.js意外的令牌(10:3)您可能需要一个合适的加载器来处理此文件类型 . SyntaxError:意外的令牌(10:3)@ . / src / App.js 22:13-46

注意:(10,3)等同于具有属性“className ='table'”的标记 .

我无法确定为什么我收到此错误,特别是当我将app.js文件导入index.js文件时,我没有遇到任何问题 . 任何帮助将不胜感激 .

0回答

No Data

loading...

评论

暂时没有评论!