web-dev-qa-db-ja.com

React.js-構文エラー：これはrender（）関数の予約語です

予約済みのキーワード「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
javascriptreactjsbabel
31
Nickadiemus

ここに記載されているソリューションはすべて正しいです。

最も簡単な変更は、関数呼び出しを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
}
63
nem035

これを避けるには、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を備えた単なる関数です。

2
Chase DeAnda

this.renderRecipeItems()部分をdivでラップすると、機能します。

失敗した理由は、この answer で@ nem035によって非常によく説明されています。

このような：

render () {
   return (
      <div>
         { this.renderRecipeItems() }
      </div>
   );
}

そして私は代わりに：

<RecipeItem key = {i} {...recipes} />

そのはず：

<RecipeItem key = {i} {...recipeItem} />

これらは私が見ることができる変更であり、他のいくつかも必要になるかもしれません。

2
Mayank Shukla