Question

在用NextJS编写JSX功能组件时遇到了意外错误。在代码中插入其他组件后，它将立即返回“意外令牌”错误。

我尝试添加{}，（），更改为Entries（）{}函数，将模拟列表移至函数中，但均无效果。一旦在返回中放置另一个组件，我仍然会收到此错误。

功能组件条目

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

您只能在组件中返回一个顶级标签。而且javascript部分必须在{}

之间

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

Answer 2

我在移动设备上，因此可能会弄乱格式。

我会尝试将组件更改为类Class Entries extends React.Component {}

并尝试使用状态而不是const。

我认为，如果所有内容都是类组件，则您的Detail.js文件中可能有某些内容可以解决。

另一种可能的解决方法是在.map和<Detail>周围添加一个div，因为您的render方法中应该只有一个主要元素。

JSX错误：意外令牌，预期为“，”

2 个答案: