我已经阅读了许多关于“意外令牌”的现有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文件时，我没有遇到任何问题 . 任何帮助将不胜感激 .

reactjs