2016-04-29 11 views
2

私はMaterial-UIの例からLeftNav Menuに接続しようとしていました。しかし、私は立ち往生した。ここでMaterial-UIをMeteor/Reactプロジェクトに接続する方法は?

は誤りである:ここでは

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

は私のコードです:

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> 
); 
} 
} 
+0

ボタンは正しく表示されていますか?あなたはcodepenか何かを再現できますか? – erichardson30

+0

それはサーバー側でも正しくコンパイルされません。 '=>プロキシを開始しました。 => MongoDBを開始しました。 =>起動時にエラーが発生しました: web.browser用にビルド中: imports/ui/App.jsx:16:2:/imports/ui/App.jsx:クラスプロパティがありません。 –

答えて

0

は、次のことを試してみてください(と私があなただったら、私はnpm install --save [email protected]経由材料-UIのベータ版をインストールしたいです)。

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> 
    ); 
    } 
} 
0

問題は、私はちょうどあなたがECMAScript仕様のstage-1の機能を使用しているためだ材料-UI

0

のベータ版に更新し、解決しました。コンパイラに適切なプラグインをインストールする必要があります。

Babelのプラグインをインストールする方法について説明します。

(1)ターミナルでのプロジェクトフォルダで、次のコマンドを使用してインストールするbabel-preset-stage-1

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

(2)次に、あなたのプロジェクトフォルダ(お持ちでない場合は、それを作成するに.bablercファイルにアクセスしてください)と

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

再び&お試しくださいあなたはまだ問題がある場合は私に知らせて、次注文ごとなどのプリセット・アレイはを重要更新します。

関連する問題