Question

我正在使用reactjs中的练习应用程序，我收到了这个错误，即使通过浏览SO也无法弄清楚：

ERROR in ./App.js
Module build failed: SyntaxError: Unexpected token, expected , (6:13)

  4 |   render(){
  5 |       return (
> 6 |           <li>{{this.props.name}}</li>
    |                     ^
  7 |       )
  8 |   }
  9 | }

 @ ./main.js 11:11-27

这些是文件：

webpack.config.js：

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

的package.json：

{
  "name": "react-test",
  "version": "1.0.0",
  "description": "react test application",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "author": "Daniel Cortes",
  "license": "ISC",
  "dependencies": {
    "react": "^15.4.0",
    "react-dom": "^15.4.0"
  }
}

的index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/paper/bootstrap.min.css">
    <style type='text/css'>
        body, input {
            font-size: 24px !important;
        }
    </style>
</head>
<body>
    <div id="app" class="container-fluid"></div>
    <script src='index.js'></script>
</body>
</html>

App.js：

import React from 'react';
import ReactDOM from 'react-dom';
class Channel extends React.Component {
    render(){
        return (
            <li>{{this.props.name}}</li>
        )
    }
}

export default Channel

main.js：

import React from 'react';
import ReactDOM from 'react-dom';
import Channel from './App';

ReactDOM.render(<Channel name='Hardware Support' />, document.getElementById('app'));

Answer 1

在App.js中，只需将表达式this.props.name而非{this.props.name}作为所需值传递：

render(){
    return (
        <li>{this.props.name}</li>
    )
}

如何更正此反应语法错误？

1 个答案: