ReactJs でのアロー関数の使用を分析する-jsチュートリアル-php.cn

ReactJs でのアロー関数の使用を分析する

巴扎黑

リリース： 2017-08-23 14:01:16

オリジナル

1465 人が閲覧しました

この記事では主に 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 &#39;react-router&#39;;
 3 | export default class Repos extends Component{
> 4 |   handleSubmit = () => {
  |         ^
 5 |
 6 |   }
 7 |   render(){

 @ ./index.js 19:13-39

ログイン後にコピー

上で述べたように、handleSubmit 関数の定義が失敗しました。それでは、どのようにして、reactjs プロジェクトでアロー関数の記述をサポートできるようになりますか? 答えは、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: &#39;babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-0&#39; 
    }
   ]
  }

ログイン後にコピー

その中で、このセンテンスローダー: '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 &#39;react-router&#39;;
 3 | export default class Repos extends Component{
> 4 |   handleSubmit = () => {
  |   ^
 5 |
 6 |   }
 7 |   render(){

 @ ./index.js 19:13-39

ログイン後にコピー

さて、これで、好きなことをして、お気に入りのアロー関数の記述方法を使用できます。

以上がReactJs でのアロー関数の使用を分析するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。