Question

src / GamesList.js

import React from 'react';
import games from './reducers/games';

export default function GamesList({games}) => {
    const emptyMessage = (
        <p>There are no games yet in your collection</p>
    );

    const gamesList=(
        <p>games list</p>
    );
    return (
        <div>
            {games.length === 0 ? emptyMessage : gamesList}

            </div>

    );
}

GamesList.propTypes={
    games: React.PropTypes.array.isRequired
}

我的代码有问题...它给出了以下错误。

第4:44行：解析错误：意外的令牌，预期为“ {”

从“ ./reducers/games”导入游戏；    导出默认功能GamesList（{games}）=> {                                                 ^ const emptyMessage =（6 |

您的游戏尚无游戏   收藏
）；

Answer 1

如果要使用箭头功能，则应如下图所示。

import React from 'react';
import games from './reducers/games';

const GamesList = ({games}) => {
    const emptyMessage = (
        <p>There are no games yet in your collection</p>
    );

    const gamesList=(
        <p>games list</p>
    );
    return (
        <div>
            {games.length === 0 ? emptyMessage : gamesList}

            </div>

    );
}

GamesList.propTypes={
    games: React.PropTypes.array.isRequired
}

export default GamesList;

OR

您可以像这样使用普通的function ...

export default function GamesList({games}) {
   // ....
   // ....
}

Answer 2

在导出默认函数GamesList（{games}）=> {}中删除“ =>”，它应该可以工作。

Answer 3

您混合使用两种不同的函数声明语法。

应使用函数声明语法：

export default function GamesList({games}) {
    //function body
}

或使用箭头功能语法：

export default const GamesList = ({games}) => {
    //function body
}

请注意，第二个示例（“箭头函数”语法）将函数名称声明为常量。两者都可以使用，但不能混在同一个声明中。

解析错误：意外的令牌，预期为“ {”

3 个答案: