4

react-rocket-boilerplateから構築されたプロジェクトにmaterial-uiコンポーネントを取り込もうとしています。

次のエラーが表示されます。

[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 に答える
0

この質問は古いことは知っていますが、今日反応を始めたばかりで、同様の問題がありました。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});
}

このソリューションは非常にハックに見えるので、あまり好きではありません。これを行う「正しい」方法を見つけたら、フォローアップします。

于 2016-08-03T08:28:14.117 に答える