React デコレータがエラーを報告した場合の対処方法

反応デコレータ エラーの解決策: 1. 「create-react-app mobx-study」を通じてプロジェクトを作成します; 2. 「yarn add -D act-app-rewired Customize-」を通じてプラグインをインストールしますcra"; 3. package.json ファイル内のスクリプトを変更します。 4. プロジェクトのルート ディレクトリに「config-overrides.js」と「.babelrc」を作成します。

#このチュートリアルの動作環境: Windows10 システム、react18.0.0 バージョン、Dell G3 コンピューター

どうすればよいですかReact デコレータがエラーを報告したら?

React のデコレータ デコレータがエラーを報告しました

# # 1. デコレータ デコレータがエラーを報告する @

React のデコレータを初めて使用する場合、プロジェクトで初めて @

が使用されるとエラーが報告されます。 React はデフォルトではサポートしていないということですが、デコレータが使用されるためエラーが報告されるため、デコレータをサポートするには何らかの設定を行う必要があります。

##【エラー表示: 解析エラー: この実験的な構文では、次のパーサー プラグインのいずれかを有効にする必要があります: 「decorators-legacy」、「decorators」。]

1. プロジェクトを作成します

npm install -g create-react-app  
// 安装create-react-app，已安装请忽略
create-react-app mobx-study

2. プラグインをインストールします—create-react-app で Webpack 構成を変更します

yarn add -D react-app-rewired customize-cra 
yarn add -D @babel/core @babel/plugin-proposal-decorators @babel/preset-env

3. package.json ファイル内の script を変更します

// package.json
"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }

4. プロジェクトのルート ディレクトリに config-overrides.js を作成し、次のように記述します以下の内容

const path = require('path')
const { override, addDecoratorsLegacy } = require('customize-cra')

function resolve(dir) {
    return path.join(__dirname, dir)
}

const customize = () => (config, env) => {
    config.resolve.alias['@'] = resolve('src')
    if (env === 'production') {
        config.externals = {
            'react': 'React',
            'react-dom': 'ReactDOM'
        }
    }

    return config
};
module.exports = override(addDecoratorsLegacy(), customize())

5. プロジェクトのルート ディレクトリに .babelrc を作成し、次の内容を記述します

{
    "presets": [
        "@babel/preset-env"
    ],
    "plugins": [
        [
            "@babel/plugin-proposal-decorators",
            {
                "legacy": true
            }
        ]
    ]}

基本的に上記の手順を完了すると、デコレータを使用できるようになります通常、@ は再度報告されません。間違っています。同時に、「実験的構文「decorators-legacy」のサポートは現在有効になっていません」というエラーも消えます。

#2. デコレータの実験的なサポートは、将来のバージョンで変更される可能性があります。この警告を削除するには、「tsconfig」または「jsconfig」で「experimentalDecorators」オプションを設定します。 ts(1219)Settings=> ExperimentalDecorators を検索 => チェックボックスをオンにします

」

以上がReact デコレータがエラーを報告した場合の対処方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。