Javascript &引用；意外标记“；在React中使用map函数时

我目前正在学习React，状态和道具的概念是相当新的。目前，我正在尝试创建一个SideNav组件来呈现一些SideNavButton组件。这是我第一次尝试将道具传递给子组件，我一直遇到这样一个毫无帮助的错误：

Syntax error: ./components/side-nav.js: Unexpected token, expected , (43:8)
41 |           <SideNavButton button={button} />
42 |         );
>43|       });
.. |         ^
44 |     );
45 |   }
46 | 

语法错误：./components/side-nav.js:意外标记，应为，（43:8）
41 |           
42 |         );
>43|       });
.. |         ^
44 |     );
45 |   }
46 | 

我真的开始相信，这根本不是问题所在。我会发布我的代码，如果有什么我可以做得更好的，请随时告诉我

/index.js

import React，{Component}来自'React'；
从“react dom”导入react dom；
从“./组件/侧导航”导入侧导航；
常量应用=（）=>{
返回(
);
}
ReactDOM.render(

);
}
导出默认侧导航按钮；

请阅读此

类

定义参考，并举例说明：

方法定义没有分号。所以把这些都去掉

类没有常量。常量可以在方法/函数中，但不能在类中是顶级的

---

您可以将

const buttons=…

转换为一个方法：

buttons（）{return…；}

请阅读此

类

定义参考和示例：

方法定义没有分号。所以把这些都去掉

类没有常量。常量可以在方法/函数中，但不能在类中是顶级的

---

您可以将

const buttons=…

转换为一个方法：

buttons（）{return…；}

side-nav.js存在一些问题，请尝试此更正的代码段

class SideNav extends Component {
        constructor(props) {
        super(props);

        this.state = {
          navButtons: [
            {
              label: "Profile",
              icon: "fas fa-user",
              location: "#!"
            },
            {
              label: "Experience",
              icon: "fas fa-book",
              location: "#!"
            },
            {
              label: "Education",
              icon: "fas fa-university",
              location: "#!"
            },
            {
              label: "Technology",
              icon: "fas fa-code",
              location: "#!"
            },
            {
              label: "Connect",
              icon: "fas fa-share-alt",
              location: "#!"
            }
          ]
        };
       }

      renderButtons() {
        return this.state.navButtons.map(button => {
          return <SideNavButton button={button} />;
        });
      }

      render() {
        return <ul className="side-nav">{this.renderButtons()}</ul>;
      }
    }

    export default SideNav;

class SideNav扩展组件{
建造师（道具）{
超级（道具）；
此.state={
导航按钮：[
{
标签：“个人资料”，
图标：“fas fa用户”，
地点：“#！”
},
{
标签：“体验”，
图标：“法宝书”，
地点：“#！”
},
{
标签：“教育”，
图标：“法华大学”，
地点：“#！”
},
{
标签：“技术”，
图标：“fas fa代码”，
地点：“#！”
},
{
标签：“连接”，
图标：“fas fa共享alt”，
地点：“#！”
}
]
};
}
renderButtons（）{
返回此.state.navButtons.map（按钮=>{
回来
});
}
render（）{
return
{this.renderButtons（）}
；
}
}
导出默认侧导航；

我已经更正了renderButtons（）和render（）{}方法

---

请在

中找到您的代码side-nav.js存在一些问题，请尝试此更正的代码片段

class SideNav extends Component {
        constructor(props) {
        super(props);

        this.state = {
          navButtons: [
            {
              label: "Profile",
              icon: "fas fa-user",
              location: "#!"
            },
            {
              label: "Experience",
              icon: "fas fa-book",
              location: "#!"
            },
            {
              label: "Education",
              icon: "fas fa-university",
              location: "#!"
            },
            {
              label: "Technology",
              icon: "fas fa-code",
              location: "#!"
            },
            {
              label: "Connect",
              icon: "fas fa-share-alt",
              location: "#!"
            }
          ]
        };
       }

      renderButtons() {
        return this.state.navButtons.map(button => {
          return <SideNavButton button={button} />;
        });
      }

      render() {
        return <ul className="side-nav">{this.renderButtons()}</ul>;
      }
    }

    export default SideNav;

class SideNav扩展组件{
建造师（道具）{
超级（道具）；
此.state={
导航按钮：[
{
标签：“个人资料”，
图标：“fas fa用户”，
地点：“#！”
},
{
标签：“体验”，
图标：“法宝书”，
地点：“#！”
},
{
标签：“教育”，
图标：“法华大学”，
地点：“#！”
},
{
标签：“技术”，
图标：“fas fa代码”，
地点：“#！”
},
{
标签：“连接”，
图标：“fas fa共享alt”，
地点：“#！”
}
]
};
}
renderButtons（）{
返回此.state.navButtons.map（按钮=>{
回来
});
}
render（）{
return
{this.renderButtons（）}
；
}
}
导出默认侧导航；

我已经更正了renderButtons（）和render（）{}方法

---

---

请在

中找到您的代码，这些文件不应该有

.jsx

扩展名吗？应该吗？我正在使用CreateReact应用程序方法，对webpack或babel一无所知。我可能错了，但从我所看到的来看，它只是

.js

。这些文件不应该有

.jsx

扩展名吗？应该吗？我正在使用CreateReact应用程序方法，对webpack或babel一无所知。我可能错了，但从我所看到的来看，它只是

.js

。谢谢你的快速回复。我目前仍然收到相同的错误，但我已经更新了问题中的代码，以反映您所说的内容。@TylerB您的代码的当前版本仍然无法修复此答案中描述的所有问题。@code peedient the error section？刚刚修复了现在从

{renderButtons（）；}

中删除分号的问题。您现在的错误是什么？谢谢您的快速回复。我目前仍然收到相同的错误，但我已经更新了问题中的代码，以反映您所说的内容。@TylerB您的代码的当前版本仍然无法修复此答案中描述的所有问题。@code peedient the error section？刚刚修复了现在从

{renderButtons（）；}

中删除分号的问题。你现在犯了什么错误？非常感谢！如果你不介意我问的话，我到底做错了什么？@TylerB 1。Render方法是返回jsx的函数，而不是函数调用。你在哪里做

渲染（返回
）在类内调用函数时必须是
render（）{return
按钮
；}
使用
this.renderButtons（）
2。在
renderButtons（）
方法中有语法错误非常感谢！我到底在干什么
import React from 'react';

const SideNavButton = ({button}) =>  {

  return(
    <li key={button.label}>
      <a href={button.location}>
        <i className={button.icon}></i>{button.label}
      </a>
    </li>
  );
}

export default SideNavButton;

class SideNav extends Component {
        constructor(props) {
        super(props);

        this.state = {
          navButtons: [
            {
              label: "Profile",
              icon: "fas fa-user",
              location: "#!"
            },
            {
              label: "Experience",
              icon: "fas fa-book",
              location: "#!"
            },
            {
              label: "Education",
              icon: "fas fa-university",
              location: "#!"
            },
            {
              label: "Technology",
              icon: "fas fa-code",
              location: "#!"
            },
            {
              label: "Connect",
              icon: "fas fa-share-alt",
              location: "#!"
            }
          ]
        };
       }

      renderButtons() {
        return this.state.navButtons.map(button => {
          return <SideNavButton button={button} />;
        });
      }

      render() {
        return <ul className="side-nav">{this.renderButtons()}</ul>;
      }
    }

    export default SideNav;