2016-07-20 7 views
0

Darf mir bitte jemand helfen? Wenn ich versuche, webpack zu verwenden, es zeigt mir dieser Fehler:FEHLER in ./src/components/Main.jsx - Webpack

Module build failed: SyntaxError: /path/to/my/folder/src/components/Main.jsx: Unexpected token (170:13) 
    168 |ReactDOM.render(
    169 |<TodoApp 
> 170 | todos={...store.getState()} 
     |   ^
    171 |  />, 
    172 |  document.getElementById('app') 
    173 | ); 

Und das ist Konfiguration meines webpack.config.js:

module : { 
    loaders : [ 
     { 
     test : /\.jsx$/, 
     exclude : /node_modules/, 
     loader : 'babel', 
     query : { 
      presets : ['react', 'es2015', 'stage-2'] 
     } 
     } 
    ] 
    } 

Kann mir jemand helfen, dieses Problem zu lösen?

Antwort

1

In JSX, {} ist ein Javascript Ausdruck. Da Sie ein Objektliteral passieren versuchen, müssen Sie doppelte Klammern verwenden:

todos={{...store.getState()}} 

JSX Expression Docs

David unten weist darauf hin, wenn Ihre Absicht, nur den Staat zu todos ohne zuzuordnen ist das Hinzufügen alle Eigenschaften der eigenen, wird dies ausreichen:

todos={store.getState()} 
+0

Ist das nicht 'todos = {{... store.getState()}}' das gleiche wie 'todos = {store.getState()}'? Sie könnten auch '' verwenden, wenn Sie möchten, dass die Top-Level-Requisiten Ihres Statusbaums die Requisiten der Komponente sind. –