ホームページ > 記事 > ウェブフロントエンド > ReactJs でのアロー関数の使用を分析する
この記事では主に ReactJs でのアロー関数の書き方を紹介します。興味のある方は参考にしてください。 Java オブジェクト指向の経験がある学生が学習して使用するのに非常に適しています。Reacjs を使用してコンポーネントを構築する場合、関数を定義するためにアロー関数を使用したい場合はどうすればよいですか?
まず、アロー関数を使用して React コンポーネント内で関数を直接定義すると、コンパイルが通らず、構文エラーが報告されます。
ERROR in ./modules/Repos.js Module build failed: SyntaxError: E:/AllWorkSpace/react-router/trunk/lessons/01- setting-up/modules/Repos.js: Unexpected token (4:16) 2 | import {Link} from 'react-router'; 3 | export default class Repos extends Component{ > 4 | handleSubmit = () => { | ^ 5 | 6 | } 7 | render(){ @ ./index.js 19:13-39
babel-preset-es2015,babel-preset-React,babel- です。 preset-stage-0,babel-plugin-transform-class-properties
この 4 つのコンポーネントを追加するだけで、アロー関数の記述方法がサポートされます。
それでは何をすればよいでしょうか? まず、もちろん、babel-preset-es2015
、babel-preset-react
、babel-preset をインストールしてダウンロードします。 -stage- 0
,babel-plugin-transform-class-properties
これら 4 つのコンポーネント。 babel-preset-es2015,babel-preset-React,babel-preset-stage-0,babel-plugin-transform-class-properties
. 只有添加这四个组件,这样才能支持箭头函数写法。
那么我们该怎么做呢,首先当然是安装和下载babel-preset-es2015
,babel-preset-react
,babel-preset-stage-0
,babel-plugin-transform-class-properties
npm install --save-dev babel-preset-es2015 npm install --save-dev babel-preset-react npm install --save-dev babel-preset-stage-0 npm install --save-dev babel-plugin-transform-class-properties次に、ルートディレクトリに.babelrcファイルを追加します。ファイルの内容は
{ presets: [ "react","es2015","stage-0"], "plugins": ["transform-class-properties"] }です。次に、webpack.config.jsに設定を追加します。
module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-0' } ] }その中で、このセンテンスローダー: 'babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-0' に注意する必要があり、その順序はこのように、間違っているはずがありません。そうでない場合は、エラーが報告されます。
ERROR in ./modules/Repos.js Module build failed: SyntaxError: E:/AllWorkSpace/react-router/trunk/lessons/01- setting-up/modules/Repos.js: Missing class properties transform. 2 | import {Link} from 'react-router'; 3 | export default class Repos extends Component{ > 4 | handleSubmit = () => { | ^ 5 | 6 | } 7 | render(){ @ ./index.js 19:13-39さて、これで、好きなことをして、お気に入りのアロー関数の記述方法を使用できます。
以上がReactJs でのアロー関数の使用を分析するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。