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; 

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

  • Как сделать setState внутри обратного вызова: ReactJS
  • Доступ к event.target внутри обратного вызова в реакции
  • поддержка детей в компоненте React
  • Рекомендации по эффективному стилю в React.js
  • Предупреждение об изъятии с использованием this.refs
  • Невозможно использовать функции Arrow внутри classа реагирующих компонентов
  • Что делает три точки в ReactJS
  • Вложенные маршруты и динамическая маршрутизация в React-router v4
  • Контролируемые и неконтролируемые компоненты ReactJs
  • Как передать данные из дочернего компонента в родителя в ReactJS?
  • Значение свойства по умолчанию в компоненте React с использованием TypeScript
  • Interesting Posts

    Как развернуть Java-апплет для современных браузеров (апплет, встраивание, объект)?

    Диспетчер сценариев Excel

    Список свойств интерфейса Java Swing?

    Обновление библиотеки поддержки Android до 23.2.0 вызывает ошибку: XmlPullParserException Бинарная строка XML-файла # 17 требует viewportWidth> 0

    Как StaticLayout используется в Android?

    Как принудительно использовать меню переполнения на устройствах с помощью кнопки меню

    Почему «dd» не работает для создания загрузочного USB?

    Можно ли компилировать и выполнять новый код во время выполнения в .NET?

    Обнаружение, если у устройства Android есть подключение к Интернету

    Что именно требуется для того, чтобы претендовать на обновление 40 долларов США до Windows 8?

    Как получить и переустановить Windows XP

    Обработка ошибок с помощью адаптера (теперь по умолчанию) Ember Data JSON-API

    Android – поля, указанные в пользовательском стиле, не действуют

    Получить выделенные строки в JTable с помощью AbstractTableModel

    Установите общий ресурс SAMBA и создайте символическую ссылку

    Давайте будем гением компьютера.