如何糾正這個反應語法錯誤？

我工作在一個reactjs實踐中的應用，我得到這個錯誤，我一直無法弄清楚，即使經過這麼仔細閱讀：如何糾正這個反應語法錯誤？

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'));

來源

2016-11-22 Daniel

它應該是'

{this.props.name}

' – Hamms

，因爲它目前的狀態，反應認爲你正在嘗試創建一個_object_ like'{this.props.name}'，這顯然是無效的語法 – Hamms

這是當你從一個項目到另一個項目進行太多的上下文切換時，會發生什麼，並且這是漫長的一天。謝謝哈姆斯，你能否以這樣的方式發佈，以便我可以將其作爲正確答案進行檢查。 – Daniel

在App.js，簡單地通過表達this.props.name而非{this.props.name}作爲所需的值：

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

來源

2016-11-23 00:34:58 Hamms

如何糾正這個反應語法錯誤？

回答

相關問題