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

Question

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

这里是错误：

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

Answer 1

尝试以下操作（如果我是你，我会通过 npm install --save material-ui@next 安装 material-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>
    );
  }
}

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"]

再试一次，如果还有问题请告诉我。

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

How to connect Material-UI to Meteor / React project?

javascript

npm

meteor

reactjs

material-ui