Material-uiエラー（クラスプロパティの変換がありません）

Question

反応マウントを使用してMeteorでmaterial-uiテーマを設定しようとしましたが、コンポーネントをマウントしています。

私は問題を設定してから、コンポーネントを拡張して、material-uiサイトの例を使用してテーマを設定できるようにしました。

次のエラーメッセージが表示されます。

クライアント/コンポーネント/ navbar.jsx：14：4：/client/components/navbar.jsx： クラスプロパティが変換されていません。

は、ここでナビゲーションバーのサンプルコード

import React from 'react'; 
import AppBar from 'material-ui/AppBar'; 
import IconButton from 'material-ui/IconButton'; 
import Navigationclose from 'material-ui/svg-icons/navigation/close'; 
import IconMenu from 'material-ui/IconMenu'; 
import NavigationMoreVert from 'material-ui/svg-icons/navigation/more-vert'; 
import MenuItem from 'material-ui/MenuItem'; 
import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme'; 
import getMuiTheme from 'material-ui/styles/getMuiTheme'; 


class Navbar extends React.Component { 

    childContextTypes: { 
    muiTheme: React.PropTypes.object.isRequired 
    } 

    getChildContext() { 
     return {muiTheme: getMuiTheme(baseTheme)}; 
    } 

    render() { 

     return (<AppBar 
      title="Title" 
      iconElementLeft={<IconButton><Navigationclose /></IconButton>} 
      iconElementRight={ 
      <IconMenu 
       iconButtonElement={ 
       <IconButton><NavigationMoreVert /></IconButton> 
       } 
       targetOrigin={{horizontal: 'right', vertical: 'top'}} 
       anchorOrigin={{horizontal: 'right', vertical: 'top'}} 
      > 
       <MenuItem primaryText="Refresh"/> 
       <MenuItem primaryText="Help"/> 
       <MenuItem primaryText="Sign out"/> 
      </IconMenu> 
     } 
     />); 
    } 
} 


export default Navbar; 

は、ここで私はあまりにもReact.createClassクラスを拡張するからそれを変更し、それが動作するようになりましrouter.jsx

import React from 'react'; 
import {mount} from 'react-mounter'; 
import {MainLayout} from '/client/layouts/mainLayout.jsx'; 
import Content from '/client/components/content.jsx'; 
import Navbar from '/client/components/navbar.jsx'; 
import Footer from '/client/components/footer.jsx'; 

FlowRouter.route("/", { 
    action() { 
    mount(MainLayout, { 
      navbar: <Navbar/>, 
     content: <Content/>, 
     footer: <Footer/> 
}); 
} 
}); 

Answer 1

です。

import React from 'react'; 
import AppBar from 'material-ui/AppBar'; 
import IconButton from 'material-ui/IconButton'; 
import Navigationclose from 'material-ui/svg-icons/navigation/close'; 
import IconMenu from 'material-ui/IconMenu'; 
import NavigationMoreVert from 'material-ui/svg-icons/navigation/more-vert'; 
import MenuItem from 'material-ui/MenuItem'; 
import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme'; 
import getMuiTheme from 'material-ui/styles/getMuiTheme'; 

var Navbar = React.createClass({ 
    childContextTypes: {muiTheme: React.PropTypes.object}, 
    getChildContext() { 
     return {muiTheme: getMuiTheme(baseTheme)}; 
    }, 
    navigate(event, index, item) { 
     console.log('navigate', item); 
     FlowRouter.go(item.route); 
    }, 
    getMenuItems() { 
     console.log('navigate1'); 
     return [ 
      { route: '/', text: 'Home' }, 
      { route: '/table', text: 'Table' } 
     ]; 
    }, 

    render() { 
     console.log('Render'); 
     return (<AppBar 
      title="Title" 
      iconElementLeft={<IconButton><Navigationclose /></IconButton>} 
      iconElementRight={ 
      <IconMenu 
       iconButtonElement={ 
       <IconButton><NavigationMoreVert /></IconButton> 
       } 
       targetOrigin={{horizontal: 'right', vertical: 'top'}} 
       anchorOrigin={{horizontal: 'right', vertical: 'top'}} 
      > 
       <MenuItem primaryText="Refresh"/> 
       <MenuItem primaryText="Help"/> 
       <MenuItem primaryText="Sign out"/> 
      </IconMenu> 
     } 
     />); 
    } 
}); 


export default Navbar; 

Answer 2

バベル変換が必要です。

npm install babel-plugin-transform-class-properties 

# .babelrc 
{ 
    "presets": [ 
    "meteor", 
    "es2015", 
    "stage-1" 
    ], 

    "plugins": [ 
    "transform-class-properties" 
    ] 
} 

Support in Meteor 1.3.3

The transform