Bagaimana cara menggunakan JSX di Vue?

Ya, Vue menyokong JSX, tetapi memerlukan konfigurasi tambahan. 1. Untuk projek Vite, pasang @vitejs/plugin-vue-jsx dan tambah plugin vuejsx () dalam vite.config.js; 2. Untuk projek Vue CLI, pasang @vue/babel-preset-jsx dan tambahkan pratetap di babel.config.js; 3. Gunakan fungsi definecomponent dan persediaan untuk mengembalikan kandungan JSX, perhatikan menggunakan konvensyen VUE seperti kelas dan onclick; 4. Dalam fail .vue, anda boleh memanggil fungsi rendering JSX melalui fungsi H atau komponen mengikat; 5. Apabila menggunakan TypeScript, fail dinamakan .TSX, dan konfigurasi JSX tsconfig.json untuk memelihara dan jsximportsource adalah vue; Harus diingat bahawa sintaks templat seperti V-If dan V-untuk tidak sesuai untuk JSX, dan ekspresi JavaScript harus digunakan. JSX bukan arus perdana di Vue dan sesuai untuk senario logik rendering kompleks. Sokongan lengkap perlu dikonfigurasikan dalam kombinasi dengan alat pembinaan.

VUE tidak menyokong JSX keluar dari kotak, tetapi anda boleh menggunakan JSX di VUE - terutamanya jika anda bekerja dengan VUE 3 dan menggunakan persediaan VITE atau VUE CLI . Berikut adalah cara untuk membolehkan dan menggunakan JSX dalam projek VUE anda.

✅ Mengapa menggunakan JSX di Vue?

Walaupun VUE secara tradisinya menggunakan templat, JSX memberi anda lebih banyak kawalan pengaturcaraan ke atas rendering - berguna untuk logik komponen kompleks, kanak -kanak dinamik, atau jika anda datang dari latar belakang yang bertindak balas.

1. Dayakan sokongan JSX

Untuk projek Vite

Pasang plugin JSX untuk Vue:

 NPM Pasang @vitejs/plugin-vue-jsx -d

Kemudian, kemas kini vite.config.js anda:

 import {defineconfig} dari 'Vite'
Import Vue dari '@vitejs/plugin-vue'
Import Vuejsx dari '@vitejs/plugin-vue-jsx'

Eksport DefinectonFig lalai ({
  Plugin: [
    vue (),
    vuejsx ()
  ]
})

Sekarang anda boleh menggunakan fail .jsx atau .tsx , atau tulis jsx di dalam fail .vue dalam fungsi setup .

Untuk projek Vue CLI

Jika anda menggunakan Vue CLI, pasang plugin Babel:

 NPM Pasang @Vue/Babel-Preset-JSX -D

Kemudian di babel.config.js anda:

 modul.exports = {
  Pratetap: ['@vue/babel-preset-jsx']
}

2. Tulis JSX dalam komponen

Anda kini boleh menulis komponen menggunakan JSX. Berikut adalah contoh fail .jsx :

 // mybutton.jsx
import {definecomponent} dari 'vue'

Eksport definisi lalai ({{
  Props: {
    Label: String,
    OnClick: Fungsi
  },
  persediaan (props) {
    kembali () => (
      <butang onclick = {props.onclick} class = "my-button">
        {props.label}
      </butang>
    )
  }
})

Nota: Gunakan class bukannya className , dan onClick bukannya onclick - ia mengikuti konvensyen DOM Vue.

3. Menggunakan JSX dalam fail .vue (pilihan)

Anda boleh mencampur JSX dalam bahagian <script setup> :

 <persediaan skrip>
import {h} dari &#39;vue&#39;

const renderDynamic = () => {
  kembali h (&#39;div&#39;, {class: &#39;dinamik&#39;}, [
    h (&#39;span&#39;, &#39;hello jsx di dalam vue!&#39;)
  ])
}
</script>

<pemat>
  <dana>
    <!-anda tidak boleh menggunakan jsx dalam <pemplate>->
    <!-tetapi anda boleh memanggil fungsi render->
    <komponen: is = "renderdynamic" />
  </div>
</template>

Sebagai alternatif, gunakan JSX hanya dalam setup() kembali jika anda tidak menggunakan <template> .

4. JSX dengan TypeScript (.tsx)

Jika anda menggunakan TypeScript, namakan fail anda .tsx dan tentukan alat peraga dengan antara muka:

 import {definecomponent} dari 'vue'

prop antara muka {
  Nama: String
  Count?: Nombor
}

Eksport definisi lalai ({{
  Props: {
    Nama: {Type: String, Diperlukan: Benar},
    kiraan: {type: nombor, lalai: 0}
  },
  Persediaan (prop: props) {
    kembali () => (
      <dana>
        <h1> Hello, {props.name}! </h1>
        <p> Count: {props.count} </p>
      </div>
    )
  }
})

Pastikan tsconfig.json anda membolehkan JSX:

 {
  "CompilerOptions": {
    "JSX": "Preserve",
    "JsXimportSource": "Vue"
  }
}

⚠️ Perkara yang perlu diingat

• Templat masih standard dalam VUE - JSX adalah pilihan dan kurang biasa.

• Tiada ciri templat dalam JSX : Arahan seperti v-if , v-for tidak berfungsi. Gunakan ekspresi JavaScript sebaliknya:

   // bukan v-jika
  {show && <p> ditunjukkan </p>}
  
  // bukan v-untuk
  {items.map (item => <div key = {item.id}> {item.label} </div>)}

• Pengendali acara: Gunakan onClick , onInput , dan lain -lain (Camelcase), dan lulus fungsi secara langsung.

• Gunakan onUpdate:xxx untuk tingkah laku seperti v-model .

---

Ringkasan

Anda boleh menggunakan JSX di Vue dengan persediaan yang betul:

• ✅ Pasang @vitejs/plugin-vue-jsx (untuk vite) atau pratetap babel (untuk Vue CLI)
• ✅ Gunakan defineComponent dan setup untuk mengembalikan fungsi render
• ✅ Tulis JSX dengan acara Vue dan konvensyen mengikat
• ✅ Bekerja dengan TypeScript melalui .tsx

Ia tidak biasa seperti dalam React, tetapi ia berkuasa untuk logik yang dinamik atau boleh diguna semula.

Pada asasnya, VUE menyokong JSX - tidak hanya dalam templat. Gunakannya di mana ia menambah nilai.

Atas ialah kandungan terperinci Bagaimana cara menggunakan JSX di Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!