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; 

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

  • Ограничение импорта приложений create-react-app вне каталога src
  • Класс расширяет React.Component не может использовать getInitialState в React
  • Что означает «Только у ReactOwner могут быть ссылки». имею в виду?
  • Как передать данные из дочернего компонента в родителя в ReactJS?
  • Почему необходимо использовать bind при работе с ES6 и ReactJS?
  • Значение свойства по умолчанию в компоненте React с использованием TypeScript
  • Повторная инициализация classа при перенаправлении
  • Инициализировать компонент инициализации компонента из реквизита
  • В чем разница между использованием конструктора vs state = {} для объявления состояния в компоненте реакции?
  • Как объединить несколько встроенных объектов стиля?
  • Загрузка изображений на основе динамического пути в ReactJs
  • Interesting Posts

    Эффективный способ отправки изображений через WCF?

    Как удалить расширение имени файла в сценарии оболочки?

    Почему у C ++ нет конструктора const?

    Как преобразовать строку ключа, разделенного пробелами, пары значений уникальных слов в dict

    Почему «десятичный» не является допустимым типом параметра атрибута?

    Как получить общее время звукового файла в Java?

    Проблемы с двойной точностью в .NET.

    Подключение к MySQL с Android с помощью JDBC

    Xcode 4 – низкая производительность

    Я защищаюсь от программного обеспечения сетевого мониторинга, если используется HTTPS?

    Как вы планируете время на оси X в excel?

    Направление пользователя в дочернее состояние при переходе в его родительское состояние с использованием UI-Router

    Вероятность получения дублирующегося значения при вызове метода GetHashCode () в строках

    Инструменты управления проектами, такие как BaseCamp, которые интегрируются с SalesForce?

    Статические переменные в C ++

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