JSX error: Unexpected Token, expected ","

Question

我运行在使用 NextJS 编写 JSX 功能组件时遇到意外错误。一旦我在我的代码中插入不同的组件，它就会 return "Unexpected token" 错误。

我尝试添加 {}、()，更改为函数 Entries(){}，将 mockList 移动到函数中，但 none 成功了。将另一个组件放入 return 后，我仍然收到此错误。

函数组件条目

import Entry from './Entry'
import Detail from './Detail'

const mockList = [
    { title: "Subway"},
    { title: "Yokohama"},
    { title: "Tokyo Station"},
    { title: "Shibuya"},
    { title: "Shinjuku"},
]

const Entries = () => {

    return (
            mockList.map(list =>
                <Entry title={list.title} />
                )
            )

}

export default Entries

一旦我将条目更改为

const Entries = () => {

    return (
            mockList.map(list =>
                <Entry title={list.title} />
                )
            <Detail />
            )

}

会弹出错误。

关于如何解决这个问题有什么建议吗？无法继续这个意外错误令人沮丧。

我正在编写功能组件作为练习，以便在此应用程序中使用 React Hooks。

Answer 1

组件中只能 return 一个顶级标签。另外 javascript 部分必须在 {}

之间

const Entries = () => {
  return (
    <>
      {mockList.map(list => <Entry title={list.title} />)}
      <Detail />
    </>
  );
};

JSX error: Unexpected Token, expected ","

JSX error: Unexpected Token, expected ","

reactjs

next.js