はい、VueはJSXをサポートしていますが、追加の構(gòu)成が必要です。 1. Viteプロジェクトの場合、 @ViteJS/Plugin-Vue-JSXをインストールし、Vite.Config.jsにVueJSX（）プラグインを追加します。 2。VueCLIプロジェクトの場合、 @vue/babel-preset-jsxをインストールし、babel.config.jsにプリセットを追加します。 3.定義コンポーネントとセットアップ関數(shù)を使用してJSXコンテンツを返し、クラスやオンクリックなどのVUE規(guī)則の使用に注意してください。 4。.vueファイルでは、h関數(shù)を介してJSXレンダリング関數(shù)を呼び出すか、コンポーネントがバインディングできます。 5. TypeScriptを使用する場合、ファイルには.tsxという名前が付けられており、Tsconfig.jsonのJSXを保存してjsximportsourceに設(shè)定します。 V-IFやV-FORなどのテンプレート構(gòu)文はJSXには適しておらず、代わりにJavaScript式を使用する必要があることに注意してください。 JSXはVUEの主流ではなく、複雑なレンダリングロジックシナリオに適しています。完全なサポートは、建設(shè)ツールと組み合わせて構(gòu)成する必要があります。

VueはJSXを箱から出してサポートしていませんが、VUEでJSXを使用できます。特に、Vue 3を使用してViteまたはVue CLIビルドのセットアップを使用している場合は使用できます。 VUEプロジェクトでJSXを有効にして使用する方法は次のとおりです。

bueでJSXを使用するのはなぜですか？

Vueは伝統(tǒng)的にテンプレートを使用していますが、JSXはレンダリングをより多くのプログラミング制御を提供します。複雑なコンポーネントロジック、ダイナミックな子供、またはReactのバックグラウンドから來ている場合。

1. JSXサポートを有効にします

Viteプロジェクトの場合

VUE用のJSXプラグインをインストールします。

 npmインストール @vitejs/plugin-vue-jsx -d

次に、 vite.config.jsを更新します：

 「vite」から{defenconfig}をインポート
'@vitejs/plugin-vue'からVueをインポート
'@vitejs/plugin-vue-jsx'からvuejsxをインポート

デフォルトのデフォルトdefineconfigをエクスポートする（{
  プラグイン：[
    vue（）、
    vuejsx（）
  ]
}）

これで、 .jsxまたは.tsxファイルを使用するか、 setup関數(shù)の.vueファイル內(nèi)にJSXを書き込むこともできます。

Vue CLIプロジェクトの場合

Vue CLIを使用している場合は、Babelプラグインをインストールしてください。

 npmインストール @vue/babel-preset-jsx -d

それからあなたのbabel.config.jsで：

 module.exports = {
  プリセット：['@vue/babel-preset-jsx']
}

2。コンポーネントにJSXを書き込みます

JSXを使用してコンポーネントを作成できるようになりました。 .jsxファイルの例は次のとおりです。

 // mybutton.jsx
'vue'から{defineComponent}をインポート

デフォルトのデフォルトのdefideComponentをエクスポートする（{
  小道具：{
    ラベル：文字列、
    onclick：function
  }、
  セットアップ（小道具）{
    return（）=>（
      <button onclick = {props.onclick} class = "my-button">
        {props.label}
      </button>
    ））
  }
}）

注： classNameの代わりにclassを使用し、 onclickの代わりにonClick使用します。VueのDom Conventionsに従います。

3. .vueファイルでJSXを使用する（オプション）

<script setup>セクションでJSXを混ぜることができます。

 <スクリプトのセットアップ>
「vue」から{h}をインポートします

const renderdynamic =（）=> {
  return h（ &#39;div&#39;、{class： &#39;dynamic&#39;}、[
    h（ &#39;span&#39;、 &#39;こんにちはjsx inside vue！&#39;）
  ]））
}
</script>

<テンプレート>
  <div>
    <！ -  <template>  - >でjsxを使用できません
    <！ - ただし、レンダリング関數(shù)を呼び出すことができます - >
    <コンポーネント：is = "renderdynamic" />
  </div>
</テンプレート>

または、 <template>を使用していない場合は、 setup() RETURNでJSXのみを使用します。

4。TypeScript （.tsx）を備えたJSX

TypeScriptを使用している場合は、ファイルに名前を付けて、 .tsxでプロップを定義します。

 'vue'から{defineComponent}をインポート

インターフェイスプロップ{
  名前：文字列
  カウント？：番號
}

デフォルトのデフォルトのdefideComponentをエクスポートする（{
  小道具：{
    名前：{タイプ：文字列、必須：true}、
    count：{type：number、default：0}
  }、
  セットアップ（小道具：小道具）{
    return（）=>（
      <div>
        <h1>こんにちは、{props.name}！</h1>
        <p> count：{props.count} </p>
      </div>
    ））
  }
}）

tsconfig.jsonがJSXを許可することを確認(rèn)してください：

 {
  「コンパイラポーション」：{
    「JSX」：「保存」、
    「jsximportsource」：「vue」
  }
}

arteしておくべきこと

• テンプレートはVUEの標(biāo)準(zhǔn)です。JSXはオプションであり、あまり一般的ではありません。

• JSXのテンプレート機(jī)能はありません： v-if 、 v-forのようなディレクティブは機(jī)能しません。代わりにJavaScript式を使用します。

   // v-ifの代わりに
  {show && <p>表示</p>}
  
  // v-forの代わりに
  {items.map（item => <div key = {item.id}> {item.label} </div>）}}

• イベントハンドラー： onClick 、 onInputなどを使用して（CamelCase）、および関數(shù)を直接渡します。

• onUpdate:xxx v-modelのような動作にxxxを使用します。

---

まとめ

正しいセットアップでvueでJSXを使用できます。

• @vitejs/plugin-vue-jsx （vite）またはbabel preset（vue cliの場合）をインストールする
• defineComponentとsetup使用してレンダリング関數(shù)を返します
• vue Vueのイベントと拘束力のある慣習(xí)でJSXを書いてください
• .tsx経由でTypeScriptで動作します

それは反応ほど一般的ではありませんが、動的または再利用可能なレンダリングロジックにとって強(qiáng)力です。

基本的に、VueはJSXをサポートしています。テンプレートではありません。価値を追加する場所に使用します。

以上がVueでJSXを使用する方法は？の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。