javascript - que - sintaxis básica de java script
React.js-Error de sintaxis: esta es una palabra reservada en la función render() (3)
Envuelva la parte
this.renderRecipeItems()
con un
div
, funcionará.
La razón por la que estaba fallando, se explica extremadamente bien por @ nem035 en esta answer .
Me gusta esto:
render () {
return (
<div>
{ this.renderRecipeItems() }
</div>
);
}
Y pienso en lugar de:
<RecipeItem key = {i} {...recipes} />
Debería ser:
<RecipeItem key = {i} {...recipeItem} />
Estos son los cambios que puedo ver, es posible que se requieran otros.
Estoy atascado en un error para la palabra clave reservada "this". En mi componente React a continuación, me muestra pasar un estado desde mi componente principal "App.js" a mi componente "RecipeList.js" para luego asignar los datos y representar cada componente RecipeItem. Simplemente no entiendo por qué me sale este error
React.js - Error de sintaxis: esta es una palabra reservada
El error se llama en RecipeList dentro del método de retorno de representación; ¡Si alguien pudiera ayudar, eso sería genial!
Gracias
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 (
<div className="App">
<div className = "container-fluid">
<h2>Recipe Box</h2>
<div>
<RecipeList recipes = {this.state.recipes}/>
</div>
</div>
<div className = "AddRecipe">
<Button>Add Recipe</Button>
</div>
</div>
);
}
}
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 => <RecipeItem key = {i} {...recipes} />);
}
render() {
return (
{ this.renderRecipeItems() }
);
}
}
export default RecipeList
Puede evitar esto reescribiendo
RecipeLists.js
como un
componente sin estado puro
.
Como componente puro:
import _ from ''lodash'';
import RecipeItem from ''./RecipeItem'';
const RecipeList = props => renderRecipeItems(props);
const renderRecipeItems = ({ recipes }) => _.map(recipes, recipeItem => <RecipeItem key = {i} {...recipes} />);
export default RecipeList;
Entonces, ahora su componente es básicamente una función con params.
Todas las soluciones dadas aquí son correctas.
El cambio más fácil es simplemente envolver su llamada de función en un elemento JSX:
return (
<div>
{ this.renderRecipeItems() }
</div>
)
Sin embargo, ninguna de las respuestas le dice (correctamente) por qué el código se estaba rompiendo en primer lugar.
En aras de un ejemplo más fácil, simplifiquemos un poco su código
// let''s simplify this
return (
{ this.renderRecipeItems() }
)
tal que el significado y el comportamiento siguen siendo los mismos. (eliminar parenths y mover curlies):
// into this
return {
this.renderRecipeItems()
};
Lo que hace este código es que contiene un bloque, denotado por
{}
, dentro del cual está intentando invocar una función.
Debido a la declaración de
return
, el bloque
{}
se trata como
un objeto literal
Un objeto literal es una lista de cero o más pares de nombres de propiedades y valores asociados de un objeto, encerrados entre llaves ({}).
que espera
a: b
sintaxis a
a: b
o
a
(
shorthand
) para sus pares de propiedad-valor.
// valid object
return {
prop: 5
}
// also valid object
const prop = 5;
return {
prop
}
Sin embargo, está pasando una llamada de función, que no es válida.
return {
this.renderRecipeItems() // There''s no property:value pair here
}
Al revisar este código, el motor asume que leerá un literal de objeto.
Cuando llegue al
this.
, se da cuenta de eso
.
no es un carácter válido para un nombre de propiedad (a menos que lo esté envolviendo en una cadena, vea más abajo) y la ejecución se rompe aquí.
function test() {
return {
this.whatever()
// ^ this is invalid object-literal syntax
}
}
test();
Para demostración, si envuelve su llamada de función entre comillas, el código aceptaría el
.
como parte de un nombre de propiedad y se rompería ahora porque no se proporciona un valor de propiedad:
function test() {
return {
''this.whatever()'' // <-- missing the value so the `}` bellow is an unexpected token
}
}
test();
Si elimina la declaración de
return
, el código no se rompería porque eso sería una llamada de función dentro de un
block
:
function test() {
/* return */ {
console.log(''this is valid'')
}
}
test();
Ahora, un problema adicional es que no es el motor JS el que está compilando su código, sino que es
babel
, por lo que obtiene
this is a reserved word
error de
this is a reserved word
lugar de
Uncaught SyntaxError: Unexpected token .
.
La razón es que JSX no acepta palabras reservadas del lenguaje JavaScript, como
class
y
this
.
Si elimina
this
, puede ver que el
razonamiento anterior todavía se aplica
: babel intenta analizar el código como un objeto literal que tiene una propiedad, pero no tiene valor, lo que significa que babel ve esto:
return {
''renderRecipeItems()'' // <-- notice the quotes. Babel throws the unexpected token error
}