Question

Learning react from a tutorial，我正在尝试使用文字和CSS，但每当我添加多个标点符号（..... / ,,,,,,等）时，我会收到错误，如下所述。

我没有明确的问题可以在此形成搜索SO，任何指向配置/代码错误的指针都是有帮助的！感谢

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;

webpack.config.js

var config = {
   entry: './main.js',
   output: {
      path:'/',
      filename: 'index.js',
   },
   devServer: {
      inline: true,
      port: 8081
   },
   module: {
      loaders: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   }
}
module.exports = config;

.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.

Answer 1

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

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

以下是不允许

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

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

1 个答案: