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; 

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

  • Что такое mapDispatchToProps?
  • В чем разница между «super ()» и «super (props)» в React при использовании classов es6?
  • Инициализировать компонент инициализации компонента из реквизита
  • Загрузка изображений на основе динамического пути в ReactJs
  • ReactJs CreateClass не является функцией
  • Как использовать jquery ui с React JS?
  • Как сделать сервер webpack dev запущенным на порту 80 и 0.0.0.0, чтобы сделать его общедоступным?
  • Класс расширяет React.Component не может использовать getInitialState в React
  • Рендеринг свойств объекта в реактиве
  • Показать или скрыть элемент в реакторе
  • Что делает три точки в ReactJS
  • Interesting Posts

    Можно ли восстановить «системный образ» на диск с другим объемом памяти?

    Недостаточно памяти при кодировании файла base64

    Как показать диалог «Открыть файл» в Access 2007 VBA?

    Как получить мостовую сеть для работы в VirtualBox с гостевой ОС Linux на хосте Mac OS X

    Как мне разрешить ввод номера в мое консольное приложение C #?

    Как заполнить массивы на Java?

    Тестирование веб-сервисов REST

    Как исправить ошибку загрузчика Windows XP, когда BOOTCFG, FIXBOOT и FIXMBR ничего не делают?

    Разница и использование onCreate (), onCreateView () и onActivityCreated () в fragmentах

    Как сопоставить <cmd> – <shift> -f, чтобы запустить плагин Ack в Vim?

    WPF Datagrid установил выбранную строку

    Как использовать собственный редактор ячеек JTable и средство отображения ячеек

    Реализация IDisposable в подclassе, когда родитель также реализует IDisposable

    Почему мы должны указывать FromBody и FromUri?

    jQuery отключает проверку правил в одном поле

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