React.js-语法错误：这是render（）函数中的保留字

Question

我被困在保留关键字“ this”的错误上。在下面的我的React Component中，我将状态从我的主要组件“ 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() }
)

这样含义和行为仍然相同。（移走双亲并移动冰壶）：

// 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
}