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; 

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

  • Повторная инициализация classа при перенаправлении
  • Значение этого в обработчике событий React
  • React: обработчик onClick получает вызов для каждого рендеринга?
  • Рекомендации по эффективному стилю в React.js
  • setState не обновляет состояние сразу
  • почему вам нужно связать функцию в конструкторе
  • Почему реквизиты JSX не должны использовать функции стрелки или связывать?
  • Как указать порт для запуска проекта, основанного на создании приложения-приложения?
  • поддержка детей в компоненте React
  • Каков наилучший способ запуска события onchange в реакции js
  • reactjs - Пользовательские компоненты JSX Не рендеринг
  • Interesting Posts

    Объект или массив дескриптора Gson

    Выполняет ли литье в int после std :: floor гарантированный правильный результат?

    Можно ли просмотреть байт-код файла classа?

    прослушиватель событий события на стилизованных значках и ярлыках карты

    Если я подключу два последовательных устройства к USB-адаптерам в одном концентраторе USB, мой компьютер увидит два разных COM-порта?

    Как сравнить даты в Java?

    CSS-селектор на основе текста элемента?

    Общие папки / настройки Mac OS для проверки (при попытке избавиться от отвратительного самозапускающегося приложения)

    Как заставить Alsa выбрать предпочтительное звуковое устройство автоматически?

    В чем разница между переменной, объектом и ссылкой?

    Как я последовательно связываю обещания с angularjs $ q?

    Групповая агрегация Mongodb $ group, ограничить длину массива

    Тема / Стиль не применяется, когда надуватель используется с ApplicationContext

    Можно ли изменить значки на панели инструментов в gVim?

    Как использовать встроенный ATI Radeon вместо Intel HD Graphics для OpenGL?

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