return 组件上的 Reactjs 错误

Question

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

Failed to compile. Error in ./src/Components/Projects.js Syntax error: Unexpected token (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} />
);

return 组件上的 Reactjs 错误

Reactjs error on return component

javascript

reactjs

npm

syntax-error

react-jsx