4

我正在尝试将material-ui组件合并到一个由react-rocket-boilerplate构建的项目中。

我收到此错误：

[23:55:11] gulp-notify: [编译错误] C:/react-rocket-boilerplate/app/js/components/Sidebar.js: 解析文件时出现意外令牌 (13:15)：C:\react-火箭样板\app\js\components\Sidebar.js

注意：Sidebar.js 是 material-ui 文档站点上提供的第一个 leftNav 示例（“SIMPLE CONTROLLED LEFTNAV”）的精确副本，仅更改了组件名称。

这是 Sidebar.js：

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';

export default class Sidebar extends React.Component {

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

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

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

这是有问题的行：

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

(13:15) 处的字符是紧跟在“handleToggle”之后的空格。

我可以改用这种语法：

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

...这解决了错误，但不允许我在被调用时访问“this”。

箭头函数在此上下文中使用时会编译：

import React from 'react';

const Logo = () => (
  <div className="logo">
    Hello World
  </div>
);

export default Logo;

我非常乐意提供任何可能有帮助的其他信息，请告诉我。

另外......这些不同的组件定义语法/格式是否有一个术语？

4

3 回答 3

4

我有同样的问题。我已经通过安装 babel-preset-stage-1 解决了这个问题，并将其添加到 .babelrc 文件中。

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

.babelrc

"presets": ["es2015", "react", "stage-1"]
于 2016-10-01T12:54:25.527 回答
2

当您将箭头函数更改为普通的旧函数时，您应该在分配事件处理程序时使用“绑定”，如下所示 -

onTouchTap={this.handleToggle.bind(this)}

语法上，它的 ES6 类，使用箭头函数声明预绑定方法，我个人没用过 gulp，但是你提到的源链接似乎是使用支持 ES6 的 babel，代码应该已经编译：|。等待知道这件事的人的回答。

于 2016-01-22T09:03:39.017 回答
0

我知道这个问题很老了，但是我今天才开始玩 react 并且遇到了类似的问题。this通过将有问题的函数绑定到构造函数中，我设法让它在我的情况下工作。所以在你的情况下：

constructor(props) {
  super(props);
  this.state = {open: false};
  // Make our bindings here
  this.handleToggle = () => this.setState({open: !this.state.open});
  this.handleClose = () => this.setState({open: false});
}

我真的不喜欢这个解决方案，因为它看起来超级hacky。如果我找出“正确”的方法来做到这一点，我会跟进。

于 2016-08-03T08:28:14.117 回答