javascript – React.js – 语法错误：这是render()函数中的保留字

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript – React.js – 语法错误：这是render()函数中的保留字，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3254字，纯文字阅读大概需要5分钟。

内容图文

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

React.js – Syntax error: this is a reserved word

在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

解决方法:

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

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

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

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

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

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

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

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

这段代码的作用是它包含一个块,用{}表示,你试图在其中调用一个函数.

由于return语句,块{}被视为an object literal

An object literal is a list of zero or more pairs of property names and associated values of an object, enclosed in curly braces ({}).

它期望a：b或a(shorthand)语法为它的属性 – 值对.

// valid object
return {
  prop: 5
}

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

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

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

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

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语句,代码不会中断,因为那只是block中的函数调用：

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

test();

现在,另一个问题是它不是编译代码的JS引擎,而是babel,这就是为什么你得到这是一个保留字错误而不是Uncaught SyntaxError：意外的令牌..

原因是JSX不接受来自JavaScript语言的保留字,例如class和this.如果你删除它,你可以看到reasoning above still applies – babel试图将代码解析为具有属性但没有值的对象文字,这意味着babel看到：

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

内容总结

以上是互联网集市为您收集整理的javascript – React.js – 语法错误：这是render()函数中的保留字全部内容，希望文章能够帮你解决javascript – React.js – 语法错误：这是render()函数中的保留字所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---