Reactjs 使用多个标点符号时出现意外标记

，我正在尝试使用文本和CSS，但每当我添加多个标点（

..

/

，，，，

等），我都会遇到如下所述的错误

我对此搜索没有明确的疑问，因此，任何指向配置/代码中错误的指针都是有帮助的！谢谢

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (

         <div>
            <Header/>
            <Footer/>
         </div>
      );
   }
}


class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
         </div>
      );
   }
}

class Footer extends React.Component{
    render(){
        return(
            {
                // notice - no div inside render, so its not mandatory here bt is in App
            }
            <h2> yoo......this is a damn footerrrrr </h2>
        );
    }
}

export default App;

.babelrc

{
  presets:['es2015','react']
}

控制台错误

webpack: Compiling...
Hash: 6d5c2bbc97798b745cec
Version: webpack 3.8.1
Time: 23ms
 1 asset
  [23] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
  [59] ./App.jsx 828 bytes {0} [built] [failed] [1 error]
    + 58 hidden modules

ERROR in ./App.jsx
Module build failed: SyntaxError: Unexpected token, expected , (61:20)

  59 |                 // notice - no div inside render, so its not mandatory here bt is in App
  60 |             }
> 61 |             <h2> yoo......this is a damn footerrrrr </h2>
     |                     ^
  62 |         );
  63 |     }
  64 | }

 @ ./main.js 11:11-31
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./main.js
webpack: Failed to compile.

webpack:编译。。。
散列：6D5C2BBC97798B745EC
版本：网页3.8.1
时间：23毫秒
1资产
[23]（网页包）/hot非递归^\.\/log$170字节{0}[内置]
[59]。/App.jsx 828字节{0}[build][failed][1错误]
+58个隐藏模块
./App.jsx中出现错误
模块生成失败：语法错误：意外令牌，应为，（61:20）
59 |//注意-render中没有div，因此bt在应用程序中不是必需的
60 |             }
>61 |哟……这是个该死的脚印
|                     ^
62 |         );
63 |     }
64 | }
@./main.js 11:11-31
@多（网页包）-开发服务器/客户端？http://localhost:8080 webpack/hot/dev server./main.js
网页包：未能编译。

渲染函数需要返回单个元素：

render(){
    return(
        <div>Your content here</div>
    );
}

render（）{
返回(
你的内容在这里
);
}

以下是不允许的

render(){
    return(
        <div>Your content here</div>
        <h2>Second element not allowed</h2>
    );
}

render（）{
返回(
你的内容在这里
不允许使用第二个元素
);
}

事实上是这样，但在这种情况下需要返回数组。哦……明白了，所以所有内容都必须包含在一个

中，所以它可以被视为一个语句？更像是被视为一个元素（可以是react元素或标准DOM元素）。正如@Flying提到的，在React 16+中，您可以返回一个元素数组。但我不会把它用在你的案子上

render(){
    return(
        <div>Your content here</div>
        <h2>Second element not allowed</h2>
    );
}