返回组件上的Reactjs错误

Question

我正在关注 React JS 教程，但是我发现自己遇到以下错误：

编译失败。 ./src/Components/Projects.js 中的错误语法错误：意外的令牌 (15:10)

return {
    <ProjectItem key={project.title} project={project} />`    
    ^     
};

但是我完全按照教程写的，但是老师没有和我一样的错误。

这是我的 App.js 文件

import React, { Component } from 'react';
import Projects from './Components/Projects';
import './App.css';

class App extends Component {
    constructor () {
        super();
        this.state = {
        projects: []
    }
}
componentWillMount () {
    this.setState({
        projects: [

            {
                title: 'Business Website',
                category: 'Web Design'
            },

            {
                title: 'Social App',
                category: 'Mobile Development'
            },

            {
                title: 'Ecomerce Shopping Cart',
                category: 'Web Development'
            }

       ]
    });
}
render() {
    return (
        <div className="App">
            My App
            <Projects projects={this.state.projects}/>
        </div>
        );
    }
}

export default App;

我的 Project.js 文件：

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

class Projects extends Component {

  render() {

    let projectItems;
    if(this.props.projects) {

      projectItems = this.props.projects.map(project => {

        return {

          <ProjectItem key={project.title} project={project} />

        };

      });

    }

    return (

      <div className="Projects">
        {projectItems}
      </div>

    );

  }

}

export default Projects;

还有我的 ProjectItem.js 文件：

import React, { Component } from 'react';

class ProjectItem extends Component {
  render() {
    return (
      <li className="Project">
        <strong>{this.props.prject.title}</strong>: {this.props.project.category}
      </li>
    );
  }
}

export default ProjectItem;

我正在使用 create-react-app

Answer 1

你需要括号，而不是大括号：

return (
    <ProjectItem key={project.title} project={project} />
);