代码之家 › 专栏 › 技术社区 › Ryuujo dhara gosai

分析错误:意外的令牌reactjs问题

parsing-error unexpected-token reactjs

0

Ryuujo dhara gosai · 技术社区 · 6 年前

我刚开始学习ReactJS,我想从Traversy Media的视频教程中学习基础知识,我将代码应用到他必须做的事情上。但我被卡住了 in this part 因为我有一个错误,无法像这样编译:

这是我写的代码:

App.JS

import React, { Component } from 'react';
import Todos from './components/Todos';
import './App.css';

class App extends Component {
  state = {
   todos: [
     {
       id: 1,
       title: 'Take out he trash',
       completed: false
     },
     {
       id: 2,
       title: 'Have a Dinner',
       completed: false
     },
     {
       id: 3,
       title: 'Meeting with Boss',
       completed: false
     },
   ]
  };

  render() {
    return (
      <div className="App">
        <Todos todos={this.state.todos} />
      </div>
    );
  }
}

export default App;

托普斯

import React, {Component} from 'react';
import TodoItem           from './TodoItem';

class Todos extends Component {
  render() {
    return this.props.todos.map((todo) => (
      <TodoItem/>
    ));
  }
}

export default Todos;

TodoItM.JS

import React, { Component } from 'react';

export class TodoItem extends Component{
  render(){
    return{
      <div>
        <p>Hello</p>
      </div>
    }
  }
}

export default TodoItem;

3 回复 | 直到 6 年前

1

Kazi Rahamatullah 6 年前

应该是那样的-

import React, { Component } from 'react';

export class TodoItem extends Component{
  render(){
    return(
      <div>
        <p>Hello</p>
      </div>
    )
  }
}

export default TodoItem;

2

Bon Andre Opina 6 年前

应该是

return(
  <div>
    <p>Hello</p>
  </div>
)

对方法或变量使用大括号

3

1

Bon Andre Opina 6 年前

todoitem.js返回语句中存在语法错误。只需替换此代码

    import React, { Component } from 'react';

     export class TodoItem extends Component{
       render(){
         return(
           <div>
            <p>Hello</p>
           </div>
               )
             }
           }

      export default TodoItem;