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
}

Answer 2

您可以通过将RecipeLists.js重写为纯无状态组件来避免这种情况。

作为纯组分：

import _ from 'lodash';
import RecipeItem from './RecipeItem';

const RecipeList = props => renderRecipeItems(props);

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

export default RecipeList;

因此，现在您的组件基本上只是具有params的函数。

Answer 3

用div包裹this.renderRecipeItems()部分，它将起作用。

@ nem035在此答案中非常好地解释了失败的原因。

像这样：

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

我认为不是：

<RecipeItem key = {i} {...recipes} />

它应该是：

<RecipeItem key = {i} {...recipeItem} />

这些是我可以看到的更改，可能还会需要其他一些更改。