Question

我试图将material-ui个组件合并到react-rocket-boilerplate构建的项目中。

我收到此错误：

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

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

这是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）的角色是紧随其后的空格＆＃34; handleToggle＆＃34;。

我可以使用这种语法：

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

...它可以解决错误，但不允许我访问＆＃34;这个＆＃34;当它被调用时。

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

import React from 'react';

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

export default Logo;

我非常乐意提供可能有用的任何和所有其他信息，请告诉我们。

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

Answer 1

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

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

.babelrc

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

Answer 2

当您将箭头函数更改为普通旧函数时，应在分配事件处理程序时使用“bind”，如此 -

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

在语法上，它的ES6类，使用Arrow函数声明预绑定方法，我没有亲自使用过gulp，但你提到的源链接似乎是使用带有ES6支持的babel，代码应该编译： |。等待知道此事的人的回答。

Answer 3

我知道这个问题已经过时了，但我刚刚开始玩反应，我遇到了类似的问题。通过将有问题的函数绑定到构造函数中的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});
}

我真的不喜欢这个解决方案，因为它似乎超级黑客。如果我找到“正确”的方法，我会跟进。

Reactjs Material-UI - 箭头函数

3 个答案: