React.js – Синтаксическая ошибка: это зарезервированное слово в функции render ()

Я застрял на ошибке для зарезервированного ключевого слова «это». В моем компоненте 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 ( 

Recipe Box

); } } 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 => ); } render() { return ( { this.renderRecipeItems() } ); } } export default RecipeList 

Все приведенные здесь решения верны.

Самое простое изменение заключается в том, чтобы просто включить вызов функции в элемент JSX:

 return ( 
{ this.renderRecipeItems() }
)

Тем не менее, ни один из ответов (правильно) не говорит вам, почему код нарушался в первую очередь.

Для упрощенного примера, давайте немного упростим ваш код.

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

так что смысл и поведение остаются прежними. (удалить шестнадцатиричные и перемещать завитки):

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

Что делает этот код, он содержит блок, обозначенный {} , в котором вы пытаетесь вызвать функцию.

Из-за оператора return блок {} обрабатывается как объектный литерал

Литеральный объект – это список нhive или более пар имен свойств и связанных значений объекта, заключенных в фигурные скобки ({}).

который ожидает либо синтаксиса a: b либо ( сокращенного ) для его пар значений свойства.

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

Однако вместо этого вы передаете вызов функции, что является недопустимым.

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

Просматривая этот код, движок предполагает, что он будет читать объект-литерал. Когда он достигнет this. , он замечает это . не является допустимым символом для имени свойства (если только вы не обертываете его в строку – см. ниже), и здесь выполняются разрывы.

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

Оберните часть this.renderRecipeItems() с помощью div , она будет работать.

Причина, почему она терпит неудачу, объясняется очень хорошо @nem035 в этом ответе .

Как это:

 render () { return ( 
{ this.renderRecipeItems() }
); }

И я думаю вместо:

  

Должен быть:

  

Это изменения, которые я вижу, возможно, некоторые другие также потребуются.

Вы можете избежать этого, переписывая RecipeLists.js как чистый компонент без гражданства .

Как чистый компонент:

 import _ from 'lodash'; import RecipeItem from './RecipeItem'; const RecipeList = props => renderRecipeItems(props); const renderRecipeItems = ({ recipes }) => _.map(recipes, recipeItem => ); export default RecipeList; 

Итак, теперь вы являетесь компонентом в основном просто функцией с параметрами.

  • Вызов метода дочерних компонентов от родителя в реакции
  • Каков наилучший способ запуска события onchange в реакции js
  • Как передать данные из дочернего компонента в родителя в ReactJS?
  • «Вы превысили квоту запроса для этого API» в Google Map
  • Неожиданный токен '=' в компоненте React
  • Как включить / выключить режим разработки ReactJS '?
  • React: обработчик onClick получает вызов для каждого рендеринга?
  • Используйте функции жизненного цикла componentWillMount или componentDidMount для запроса async в React
  • Невозможно прочитать свойство 'map' неопределенного в React
  • Невозможно использовать функции Arrow внутри classа реагирующих компонентов
  • Как избежать привязки внутри метода рендеринга
  • Давайте будем гением компьютера.