予約済みのキーワード「this」のエラーが発生しています。次のReactコンポーネントでは、メインコンポーネント "App.js"から "RecipeList.js"コンポーネントに状態を渡し、データをマップして各RecipeItemコンポーネントをレンダリングします。このエラーが発生する理由がわかりません
React.js-構文エラー:これは予約語です
エラーは、render returnメソッド内の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 (
<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
ここに記載されているソリューションはすべて正しいです。
最も簡単な変更は、関数呼び出しをJSX要素でラップすることです。
return (
<div>
{ this.renderRecipeItems() }
</div>
)
ただし、最初にコードが破損した理由を(正確に)答えているものはありません。
簡単な例のために、コードを少し単純化しましょう
// let's simplify this
return (
{ this.renderRecipeItems() }
)
その意味と振る舞いはまだ同じです。 (括弧を削除し、カーリーを移動します):
// into this
return {
this.renderRecipeItems()
};
このコードには、{}
で示されるブロックが含まれており、そのブロック内で関数を呼び出そうとしています。
return
ステートメントのため、ブロック{}
は オブジェクトリテラル のように扱われます
オブジェクトリテラルは、プロパティ名と関連するオブジェクトの値の0個以上のペアのリストであり、中括弧({})で囲まれています。
これは、プロパティ値のペアにa: b
またはa
( 略記 )構文のいずれかを想定しています。
// 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();
デモンストレーションのために、関数呼び出しを引用符で囲むと、コードはプロパティ名の一部として.
を受け入れ、プロパティ値が提供されないため、すぐに壊れます。
function test() {
return {
'this.whatever()' // <-- missing the value so the `}` bellow is an unexpected token
}
}
test();
return
ステートメントを削除しても、コードは壊れません。これは、 ブロック 内の関数呼び出しに過ぎないためです。
function test() {
/* return */ {
console.log('this is valid')
}
}
test();
現在、追加の問題は、コードをコンパイルしているのがJSエンジンではなく、 babel であるため、this is a reserved Word
ではなくUncaught SyntaxError: Unexpected token .
エラーが発生することです。
その理由は、JSXは、class
やthis
などのJavaScript言語の予約語を受け入れないためです。 this
を削除すると、 上記の理由が引き続き適用されます -babelがプロパティを持ち、値を持たないオブジェクトリテラルとしてコードを解析しようとしていることがわかります。
return {
'renderRecipeItems()' // <-- notice the quotes. Babel throws the unexpected token error
}
これを避けるには、RecipeLists.js
を 純粋なステートレスコンポーネント に書き換えます。
純粋なコンポーネントとして:
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;
したがって、コンポーネントは基本的にparamsを備えた単なる関数です。
this.renderRecipeItems()
部分をdiv
でラップすると、機能します。
失敗した理由は、この answer で@ nem035によって非常によく説明されています。
このような:
render () {
return (
<div>
{ this.renderRecipeItems() }
</div>
);
}
そして私は代わりに:
<RecipeItem key = {i} {...recipes} />
そのはず:
<RecipeItem key = {i} {...recipeItem} />
これらは私が見ることができる変更であり、他のいくつかも必要になるかもしれません。