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

我被保留关键字“this”的错误卡住了。在下面的React组件中，我将状态从我的主组件“App.js”传递到我的“RecipeList.js”组件，然后映射数据并呈现每个RecipeItem组件。我只是不明白为什么我会犯这个错误

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

在渲染返回方法内的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;

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

//主要导入
从“React”导入React，{Component}；
//助手导入
从“reactstrap”导入{Button}
从“./components/RecipeItem”导入RecipeItem；
从“./components/RecipeList”导入RecipeList；
导入“/App.css”；
常量配方=[
{
recipeName:“汉堡包”，
配料：“绞肉、调味料”
},
{
recipeName:“蟹腿”，
配料：“螃蟹、奥莱湾调味品”
}
];
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
食谱
};
}
render（）{
返回(
配方盒
添加配方
);
}
}
导出默认应用程序；

RecipeLists.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;

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

import React，{Component}来自'React'；
从“lodash”进口；
从“./RecipeItem”导入RecipeItem；
类RecipeList扩展了组件{
renderRecipeItems（）{
return.map（this.props.recipes，recipeItem=>）；
}
render（）{
返回(
{this.renderRecipeItems（）}
);
}
}
导出默认RecipeList

您可以通过将

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;

从“lodash”导入；
从“./RecipeItem”导入RecipeItem；
const RecipeList=props=>renderRecipeItems（props）；
const renderRecipeItems=（{recipes}）=>u2; map（recipes，recipeItem=>）；
导出默认RecipeList；

---

现在，您知道组件基本上只是一个带参数的函数。

将

this.renderRecipeItems（）

部分包装成一个

div

，它就可以工作了

在本文中，@nem035非常好地解释了它失败的原因

像这样：

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

render（）{
返回(
{this.renderRecipeItems（）}
);
}

我认为不是：

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

应该是：

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

---

这些是我看到的变化，可能还需要其他一些变化。

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

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

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

这样，意义和行为仍然是相同的。（删除父对象并移动卷曲）：

这段代码所做的是它包含一个块，用

{}

表示，您试图在其中调用函数

由于该语句，块

{}

被视为

对象文字是对象的零对或多对属性名和关联值的列表，用大括号（{}）括起来

它的属性值对需要

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.

时，它会注意到

不是属性名称的有效字符（除非您将其包装为字符串-请参见下文），执行在此处中断

功能测试（）{
返回{
这个
//^这是无效的对象文字语法
}
}
test（）返回的不是数组，而是在中调用函数的无效对象文本it@nem035对不起，我没听清楚，你能解释一下“这是一个带有函数cal的无效对象文字”在哪里？对于一个注释来说可能太长了，我添加了一个补充答案。你能解释清楚一点吗？如果您用正确的行为替换了不正确的“返回数组”部分，我很乐意删除我的答案并更新您的答案。@nem035我将更新我的答案，但不要删除您的答案。它解释了很多事情，非常棒的人需要知道这一点，如果您删除它，它将不可见，现在我想我应该删除我的答案：）老兄，非常感谢你。读了几遍之后，这就更有意义了。在我发布这篇文章后不久，我意识到为什么我的JSX没有运行，但现在我知道了原因。又是一个男人。谢谢@尼卡迪默斯很高兴能帮上忙，伙计：）非常感谢！