React.js – Синтаксическая ошибка: это зарезервированное слово в функции render ()
Я застрял на ошибке для зарезервированного ключевого слова «это». В моем компоненте React ниже показано, как я передал состояние из моего основного компонента «App.js» в свой компонент «RecipeList.js», чтобы затем отобразить данные и отобразить каждый компонент RecipeItem. Я просто не понимаю, почему я получаю эту ошибку
React.js – Синтаксическая ошибка: это зарезервированное слово
Ошибка вызывается в RecipeList внутри метода возврата рендеринга; Если бы кто-нибудь мог помочь, это здорово!
- setState не обновляет состояние сразу
- Почему и когда нам нужно связывать функции и eventHandlers в React?
- Как сообщить серверу webpack dev для обслуживания index.html для любого маршрута
- Контролируемые и неконтролируемые компоненты ReactJs
- ReactJs CreateClass не является функцией
благодаря
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
- Показать или скрыть элемент в реакторе
- Инициализировать компонент инициализации компонента из реквизита
- Предупреждение об изъятии с использованием this.refs
- Как передать данные из дочернего компонента в родителя в ReactJS?
- Реагировать на фокус на ввод после рендера
- Имена компонентов ReactJS должны начинаться с заглавных букв?
- Контекст доступа к контексту вне функции рендеринга
- Что такое mapDispatchToProps?
Все приведенные здесь решения верны.
Самое простое изменение заключается в том, чтобы просто включить вызов функции в элемент 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 =>
Итак, теперь вы являетесь компонентом в основном просто функцией с параметрами.