ReactJS：“语法错误：意外的令牌”答案

【问题标题】：ReactJS: "SyntaxError: Unexpected token "ReactJS：“语法错误：意外的令牌”
【发布时间】：2021-09-27 13:18:12
【问题描述】：

我对 React 非常陌生。以下是我的第一个脚本。

但我收到以下错误。

Failed to compile

./src/components/Layout/index.js
Syntax error: Unexpected token (12:5)

  10 | const Layout = (props) => {
  11 |   return(
> 12 |     <>
     |      ^
  13 | 
  14 |    <Header />
  15 |    {props.children}

这是我的布局组件代码：

import React from 'react';
import Header from '../Header';


/**
* @author
* @function Layout
**/

const Layout = (props) => {
  return(
    <>

   <Header />
   {props.children}
   </>
   )

 }

export default Layout;

知道怎么解决吗？

【问题讨论】：

什么版本of Babel are you running？
提供更多信息，例如你的 babel 配置以及你的吸引力
您的项目是否设置为处理 .js 文件中的 JSX？还是需要.jsx
你试过在return后面加一个空格吗？还是删除左括号后的换行符？
@novonimo 非常感谢，添加 ... 后它的工作原理，但是你能解释一下为什么这个错误出现在 > 中吗？

标签： javascript reactjs

【解决方案1】：

尝试使用来自React 库的Fragment。

它提供了一个空标签，例如<> </>，但旧版本的 JSX Babel 插件不理解它。

正如问题的 cmets 中所述，这是您的 babel 插件版本的问题。

import React, {Fragment} from 'react';
import Header from '../Header';

const Layout = (props) => {
  return(
    <Fragment>
      <Header />
      {props.children}
   </Fragment>
   )

 }

export default Layout;

【讨论】：

【解决方案2】：

请上传完整的信息。像json文件和头文件一样。使用/>代替>并在header和{props.children}之间使用, /p>

【讨论】：

标题和子元素之间不需要,。这里唯一的问题是 React 和/或 Babel 设置。