React.js - Syntax-Fehler: dies ist ein reserviertes Wort in render () - Funktion

Bin ich stecken auf einem Fehler für das reservierte Schlüsselwort "this". In meinem Reagieren Komponente unten zeigt mir die Weitergabe in einen Staat aus einem meiner Haupt-Komponente "App.js" meine "RecipeList.js" die Komponente, dann die Zuordnung der Daten und Rendern jedes RecipeItem Komponente. Ich verstehe nur nicht, warum bekomme ich diesen Fehler

React.js - Syntax-Fehler: dies ist ein reserviertes Wort

Der Fehler heißt in RecipeList innerhalb der render-return-Methode; Wenn jemand helfen könnte, wäre Super!!!

Dank

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

InformationsquelleAutor der Frage Nickadiemus | 2017-06-30

  1. 2

    Wickeln Sie die this.renderRecipeItems() Teil mit einem div ist, wird es funktionieren.

    Grund, warum es scheitert, erklärt sich sehr gut von @nem035 in diesem Antwort.

    Wie diese:

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

    Und ich denke, statt: 

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

    Sollte es sein:

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

    Dies sind die änderungen, die ich sehen kann, können einige andere werden auch benötigt.

    InformationsquelleAutor der Antwort Mayank Shukla

  2. 2

    Können Sie vermeiden, indem Sie umschreiben RecipeLists.js als reines stateless Komponente.

    Als Reine Komponente:

    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;

    So, jetzt du bist Komponente ist im Grunde nur eine Funktion, mit params.

    InformationsquelleAutor der Antwort Chase DeAnda

Schreibe einen Kommentar