Wie korrigiere ich diesen Reaktionssyntaxfehler?

ich auf einer Praxis Anwendung arbeitete in reactjs und ich erhalte diesen Fehler, dass ich nicht in der Lage gewesen, auch, um herauszufinden, mit durch SO Lese:Wie korrigiere ich diesen Reaktionssyntaxfehler?

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

Dies sind die Dateien:

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

Quelle

2016-11-22 Daniel

sollte es sein

{this.props.name}

' – Hamms

wie es derzeit steht, reagiert denkt, dass Sie versuchen, ein _object_ wie' {this.props.name} 'zu erstellen, die offensichtlich ungültige Syntax ist – Hamms

Dies ist was passiert, wenn Sie zu viel Kontext von einem Projekt zum anderen wechseln und es war ein langer Tag. Danke Hamms, kannst du das so posten, dass ich es als richtige Antwort abhaken kann. – Daniel

In App.js passieren einfach den Ausdruck this.props.name anstatt {this.props.name} als Sollwert:

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

Quelle

2016-11-23 00:34:58 Hamms

Wie korrigiere ich diesen Reaktionssyntaxfehler?

Antwort

Verwandte Themen