Bilakah Saya Harus Menggunakan Tanda Kurung atau Pendakap Kerinting dalam Fungsi Anak Panah ES6?

Menggunakan Kurungan atau Pendakap Kerinting dalam Fungsi Anak Panah

Dalam ES6, fungsi anak panah menyediakan sintaks ringkas untuk mentakrifkan fungsi. Walau bagaimanapun, satu kekeliruan biasa ialah penggunaan kurungan atau kurungan kerinting selepas anak panah gemuk (=>).

Pulangan Nilai Tunggal: Kurung

Kurungan digunakan apabila fungsi anak panah mengembalikan nilai tunggal, seperti:

const foo = (params) => (
    <span>
        <p>Content</p>
    </span>
);

Dalam contoh ini, anak panah fungsi mengembalikan elemen JSX. Memandangkan ia adalah satu elemen, kurungan digunakan.

Kod Baris Berbilang: Pendakap Kerinting

Pendakap kerinting diperlukan apabila fungsi anak panah melaksanakan berbilang baris kod:

const handleBar = (e) => {
    e.preventDefault();
    dispatch('logout');
};

Di sini, fungsi anak panah menjalankan berbilang operasi, oleh itu ia menggunakan kerinting pendakap.

Kekaburan dengan JSX

Kurungan dalam contoh berikut mungkin kelihatan mengelirukan kerana menggunakan JSX:

const foo = (params) => (
    <span>
        <p>Content</p>
    </span>
);

Walaupun nampaknya menggunakan berbilang baris, JSX sebenarnya disusun kepada satu elemen, itulah sebabnya tanda kurungan digunakan.

Contoh Lain

Untuk penjelasan, berikut ialah beberapa contoh tambahan:

const a = (who) => "hello " + who + "!";
const b = (who) => ("hello " + who + "!");
const c = (who) => (
  "hello " + who + "!"
);
const d = (who) => (
  "hello "
    + who
    + "!"
);
const e = (who) => {
  return "hello " + who + "!";
};

Fungsi ini semua mengembalikan hasil yang sama, menunjukkan fleksibiliti menggunakan kurungan atau pendakap kerinting berdasarkan bilangan yang dilaksanakan baris.

Mengelakkan Kekeliruan Penghurai

Kurungan juga boleh digunakan di sekeliling literal objek untuk mengelakkan penghurai menganggapnya sebagai blok kod:

const x = () => {} // Does nothing
const y = () => ({}) // Returns an object

Atas ialah kandungan terperinci Bilakah Saya Harus Menggunakan Tanda Kurung atau Pendakap Kerinting dalam Fungsi Anak Panah ES6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!