Question

我为保留关键字＆＃34;这＆＃34;而陷入了错误。在我的React组件中，显示我从我的主要组件传递状态＆＃34; App.js＆＃34;到我的＆＃34; RecipeList.js＆＃34;然后组件映射数据并呈现每个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语句，阻止{}被视为an object literal

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

对于它的属性 - 值对，需要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
}

在浏览此代码时，引擎会假定它将读取一个object-literal。当它到达this.时，它注意到.不是属性名称的有效字符（除非您将其包装在字符串中 - 请参见下文）并且执行在此处中断。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如果删除return语句，代码就不会中断，因为这只是block内的函数调用：

＆＃13;

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

＆＃13;

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

原因是JSX不接受JavaScript语言中的保留字，例如class和this。如果删除this，您可以看到reasoning above still applies - babel尝试将代码解析为具有属性但没有值的对象文字，这意味着babel会看到：

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

Answer 2

您可以通过将RecipeLists.js重写为pure stateless component来避免这种情况。

作为Pure组件：

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;

所以现在你的组件基本上只是一个带有参数的函数。

Answer 3

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

这个失败的原因，@ nem035在answer中解释得非常好。

像这样：

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

而我认为而不是：

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

应该是：

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

这些是我可以看到的变化，也可能是其他一些变化。

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

3 个答案: