React.js - Erreur de syntaxe: c'est un mot réservé dans la fonction render ()

Je suis bloqué sur une erreur pour le mot clé réservé "ce". Dans mon Réagir Composant ci-dessous montre moi en passant d'un état à partir d'une de mes principale composante "App.js" à mon "RecipeList.js pour mapper les données et de rendre chaque RecipeItem Composant. Je ne comprends juste pas pourquoi j'ai cette erreur

React.js - erreur de Syntaxe: c'est un mot réservé

L'erreur est appelé dans RecipeList à l'intérieur de la rendre de retour de la méthode; Si quelqu'un peut aider ce serait génial!

Grâce

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

source d'informationauteur Nickadiemus

  1. 2

    Envelopper le this.renderRecipeItems() partie avec un divil va fonctionner.

    Raison pour laquelle il n'était pas, s'explique très bien par @nem035 dans ce réponse.

    Comme ceci:

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

    Et je pense qu'au lieu de: 

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

    Il devrait être:

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

    Ce sont les modifications que je peux voir, peut-être certains autres seront également nécessaires.

  2. 2

    Vous pouvez éviter cela en réécriture RecipeLists.js comme un pure apatrides composant.

    Comme Pure composant:

    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;

    Donc maintenant vous êtes en composant est fondamentalement juste une fonction avec des paramètres.