如何将Material-UI连接到Meteor / React项目？

Question

我试图从Material-UI示例连接LeftNav菜单； 但是，我被卡住了。

这是错误：

在构建web.browser时：imports / ui / App.jsx：14：2：/imports/ui/App.jsx：缺少类属性转换。

这是我的代码：

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

尝试以下操作（如果您是我，我将通过npm install --save material-ui@next的Beta版）。

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

问题解决了，我刚刚更新为material-ui的测试版

Answer 3

这是因为您正在使用ECMAScript规范的第stage-1功能。 您必须在编译器中安装适当的插件。

以下是有关如何安装Babel插件的一些说明。

（1）在终端的项目文件夹中，使用以下命令安装babel-preset-stage-1

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

（2）然后转到项目文件夹中的.bablerc文件（如果没有，请创建该文件），并按照以下顺序更新预设数组，

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

再试一次，让我知道您是否仍然有问题。