React.js - 语法错误:这是render()函数中的保留字

Question

我对保留关键字"this"的错误感到困惑.在我的React组件中,下面显示我从一个状态从我的主要组件"App.js"传递到我的"RecipeList.js"组件,然后映射数据并渲染每个RecipeItem组件.我只是不明白为什么我会收到这个错误

React.js - 语法错误:这是一个保留字

在render return方法中的RecipeList中调用错误; 如果有人能提供帮助那就太好了!

谢谢

App.js

//main imports
import React, { Component } from 'react';

//helper imports
import {Button} from 'reactstrap'
import RecipeItem from './components/RecipeItem';
import RecipeList from './components/RecipeList';
import './App.css';

const recipes = [
  {
    recipeName: 'Hamburger',
    ingrediants: 'ground meat, seasoning'
  },
  {
    recipeName: 'Crab Legs',
    ingrediants: 'crab, Ole Bay seasoning,'
  }
];

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      recipes
    };
  }

  render() {
    return (
      <div className="App">
        <div className = "container-fluid">
          <h2>Recipe Box</h2>
          <div>
            <RecipeList recipes = {this.state.recipes}/>
          </div>
        </div>
        <div className = "AddRecipe">
          <Button>Add Recipe</Button>
        </div>

      </div>
    );
  }
}

export default App;

RecipeLists.js

import React, {Component} from 'react';
import _ from 'lodash';
import RecipeItem from './RecipeItem';


class RecipeList extends Component {

    renderRecipeItems() {
      return _.map(this.props.recipes, recipeItem => <RecipeItem key = {i} {...recipes} />);
    }

    render() {
      return (
        { this.renderRecipeItems() }
      );
    }
}

export default RecipeList

Answer 1

这里给出的所有解决方案都是正确的

最简单的改变是将函数调用包装在JSX元素中:

return (
  <div>
    { this.renderRecipeItems() }
  </div>
)

但是,没有一个答案是(正确地)告诉你为什么代码在一开始就破坏了.

为了更简单的示例,让我们简化您的代码

// let's simplify this
return (
  { this.renderRecipeItems() }
)

这样的意思和行为仍然是一样的.(删除parenths并移动curlies):

// into this
return {
  this.renderRecipeItems()
};

这段代码的作用是它包含一个块,表示为{},您正在尝试调用一个函数.

由于该return语句,该块{}被视为对象文字

对象文字是零个或多个属性名称对和对象的关联值的列表,用大括号({})括起来.

期望它的属性 - 值对的语法a: b或a(简写)语法.

// valid object
return {
  prop: 5
}

// also valid object
const prop = 5;
return {
  prop
}

但是,您正在传递函数调用,这是无效的.

return {
  this.renderRecipeItems() // There's no property:value pair here
}

在浏览此代码时,引擎会假定它将读取对象文字.当它到达时this.,它注意到它.不是属性名称的有效字符(除非你将它包装在一个字符串中 - 见下文)并且执行在此处中断.

function test() {
  return {
    this.whatever()
    //  ^ this is invalid object-literal syntax
  }
}

test();

为了演示,如果您将函数调用包装在引号中,代码将接受.属性名称的一部分并且现在会中断,因为未提供属性值:

function test() {
  return {
    'this.whatever()' // <-- missing the value so the `}` bellow is an unexpected token
  }
}

test();

如果删除该return语句,代码将不会中断,因为那只是一个块内的函数调用:

function test() {
  /* return */ {
    console.log('this is valid')
  }
}

test();

现在,另一个问题是它不是JS引擎正在编译你的代码,但它是babel,这就是为什么你得到this is a reserved word错误而不是Uncaught SyntaxError: Unexpected token ..

原因是JSX不接受来自JavaScript语言的保留字,例如class和this.如果你删除this,你可以看到上面的推理仍然适用 - babel试图将代码解析为具有属性的对象文字,但没有值,这意味着babel看到:

return {
  'renderRecipeItems()' // <-- notice the quotes. Babel throws the unexpected token error
}