Wie verbinde ich Material-UI mit Meteor/React?

Question

Ich habe versucht, LeftNav Menu von Beispiel zu verbinden; Ich blieb jedoch stecken. Hier

ist der Fehler:

While building for web.browser: imports/ui/App.jsx:14:2: /imports/ui/App.jsx: Missing class properties transform.

Hier ist mein Code:

import React from 'react'; 
import LeftNav from 'material-ui/lib/left-nav'; 
import MenuItem from 'material-ui/lib/menus/menu-item'; 
import RaisedButton from 'material-ui/lib/raised-button'; 


// App component - represents the whole app 
export default class App extends Component { 

    constructor(props) { 
    super(props); 
    this.state = {open: false}; 
} 

handleToggle =() => this.setState({open: !this.state.open}); 

render() { 
    return (
    <div> 
    <RaisedButton 
     label="Toggle LeftNav" 
     onTouchTap={this.handleToggle} 
    /> 
    <LeftNav open={this.state.open}> 
     <MenuItem>Menu Item</MenuItem> 
     <MenuItem>Menu Item 2</MenuItem> 
    </LeftNav> 
    </div> 
); 
} 
} 

Answer 1

Versuchen Sie die folgenden (und wenn ich Sie wäre, würde ich die Beta-Version von Material-ui über npm install --save material-ui@next installieren).

import React from 'react'; 
import { LeftNav, MenuItem, RaisedButton } from 'material-ui'; 

// App component - represents the whole app 
export default class App extends Component { 
    constructor(props) { 
    super(props); 
    this.handleToggle = this.handleToggle.bind(this); 
    this.state = { open: false }; 
    } 

    handleToggle() { 
    this.setState({ open: !this.state.open }); 
    } 

    render() { 
    return (
     <div> 
     <RaisedButton 
      label="Toggle LeftNav" 
      onTouchTap={this.handleToggle} 
     /> 
     <LeftNav open={this.state.open}> 
      <MenuItem>Menu Item</MenuItem> 
      <MenuItem>Menu Item 2</MenuItem> 
     </LeftNav> 
     </div> 
    ); 
    } 
} 

Answer 2

Das Problem war, löste ich auf die Beta-Version von Material-ui

Answer 3

Das ist, weil Sie verwenden stage-1 Merkmale der ECMAScript-Spezifikation nur aktualisiert. Sie müssen die richtigen Plugins in Ihrem Compiler installieren.

Hier sind einige Anweisungen zur Installation des Plugins für Babel.

(1) Zu Ihrem Projektordner in Terminal, verwenden Sie den folgenden Befehl installieren babel-preset-stage-1

meteor npm install --save-dev babel-preset-stage-1 

(2) Dann gehen Sie zu .bablerc Datei in Ihrem Projektordner (es erstellen, wenn Sie noch kein Konto haben) und die Voreinstellungen Array, wie in der folgenden um

"presets": ["env", "react", "stage-1"] 

Nochmal versuchen & lassen Sie mich zählt, aktualisieren, wenn Sie noch ein Problem haben.