[英]How do I correct this react syntax error?
我正在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'));
在App.js
,只需傳遞表達式this.props.name
而不是{this.props.name}
作為所需值:
render(){
return (
<li>{this.props.name}</li>
)
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.