Cara Membina Cangkuk Reaksi Anda Sendiri: Panduan Langkah demi Langkah

Cakuk React Tersuai ialah alat penting yang membolehkan anda menambah fungsi unik dan istimewa pada aplikasi React anda.

Dalam banyak kes, jika anda ingin menambahkan ciri tertentu pada aplikasi anda, anda boleh memasang perpustakaan pihak ketiga yang dibuat untuk menyelesaikan masalah anda. Tetapi jika perpustakaan atau cangkuk seperti itu tidak wujud, apa yang anda lakukan?

Sebagai pembangun React, adalah penting untuk mempelajari proses mencipta cangkuk tersuai untuk menyelesaikan masalah atau menambah ciri yang tiada dalam projek React anda sendiri.

Dalam panduan langkah demi langkah ini, saya akan menunjukkan kepada anda cara membuat cangkuk React tersuai anda sendiri dengan memecahkan tiga cangkuk yang telah saya buat untuk aplikasi saya sendiri, bersama-sama dengan masalah yang dicipta untuk diselesaikan.

1. gunakan CangkukCopyToClipboard Pada versi lama tapak web saya, reedbarger.com, saya membenarkan pengguna menyalin kod daripada artikel saya dengan bantuan pakej yang dipanggil react-copy-to-clipboard.

Seorang pengguna hanya menuding di atas coretan, mengklik butang papan keratan dan kod itu ditambahkan pada papan keratan komputer mereka untuk membolehkan mereka menampal dan menggunakan kod itu, di mana-mana sahaja yang mereka suka.

copy-gif.gif
Daripada menggunakan perpustakaan pihak ketiga, walau bagaimanapun, saya ingin mencipta semula fungsi ini dengan cangkuk React tersuai saya sendiri. Seperti setiap cangkuk tindak balas tersuai yang saya buat, saya meletakkannya sebagai folder khusus, biasanya dipanggil utils atau lib, khusus untuk fungsi yang boleh saya gunakan semula merentas apl saya.

Kami akan meletakkan cangkuk ini dalam fail yang dipanggil useCopyToClipboard.js dan saya akan membuat fungsi dengan nama yang sama.

Terdapat pelbagai cara kita boleh menyalin beberapa teks ke papan keratan pengguna. Saya lebih suka menggunakan perpustakaan untuk ini, yang menjadikan proses lebih dipercayai, dipanggil salin ke papan keratan.

Ia mengeksport fungsi, yang akan kami panggil salinan.

// utils/useCopyToClipboard.js
import React daripada "react";
import salinan daripada "copy-to-clipboard";

eksport fungsi lalai useCopyToClipboard() {}
Seterusnya kita akan mencipta satu fungsi yang akan digunakan untuk menyalin apa sahaja teks yang ingin ditambahkan pada papan keratan pengguna. Kami akan memanggil fungsi ini handleCopy.

Cara membuat fungsi handleCopy
Dalam fungsi tersebut, pertama sekali kita perlu memastikan ia hanya menerima data daripada jenis rentetan atau nombor. Kami akan menyediakan pernyataan if-else, yang akan memastikan bahawa jenisnya adalah sama ada rentetan atau nombor. Jika tidak, kami akan log ralat ke konsol yang memberitahu pengguna anda tidak boleh menyalin sebarang jenis lain.

import React daripada "react";
import salinan daripada "copy-to-clipboard";

eksport fungsi lalai useCopyToClipboard() {
const [isCopied, setCopied] = React.useState(false);

fungsi pemegangSalin(teks) {
if (jenis teks === "rentetan" || jenis teks == "nombor") {
// salin
} lain {
// jangan tiru
console.error(
Tidak boleh menyalin jenis ${typeof text} ke papan keratan, mestilah rentetan atau nombor.
);
}
}
}
Seterusnya kita mengambil teks dan menukarnya kepada rentetan, yang kemudiannya akan kita hantar ke fungsi salin. Dari situ, kami mengembalikan fungsi handleCopy dari cangkuk ke mana-mana yang kami suka dalam aplikasi kami.

Secara amnya, fungsi handleCopy akan disambungkan kepada onClick butang.

import React daripada "react";
import salinan daripada "copy-to-clipboard";

eksport fungsi lalai useCopyToClipboard() {
pemegang fungsiSalin(teks) {
if (jenis teks === "rentetan" || jenis teks == "nombor") {
copy(text.toString());
} lain {
console.error(
Tidak boleh menyalin jenis ${typeof text} ke papan keratan, mestilah rentetan atau nombor.
);
}
}

penangan pemulanganCopy;
}
Selain itu, kami mahukan beberapa keadaan yang mewakili sama ada teks itu disalin atau tidak. Untuk menciptanya, kami akan memanggil useState di bahagian atas cangkuk kami dan membuat pembolehubah keadaan baharu isCopied, di mana penetap akan dipanggil setCopy.

Pada mulanya nilai ini akan menjadi palsu. Jika teks berjaya disalin, kami akan menetapkan salinan kepada benar. Jika tidak, kami akan menetapkannya kepada palsu.

Akhir sekali, kami akan mengembalikan isCopied dari cangkuk dalam tatasusunan bersama-sama dengan handleCopy.

import React daripada "react";
import salinan daripada "copy-to-clipboard";

eksport fungsi lalai useCopyToClipboard(resetInterval = null) {
const [isCopied, setCopied] = React.useState(false);

fungsi pemegangSalin(teks) {
if (jenis teks === "rentetan" || jenis teks == "nombor") {
copy(text.toString());
setCopied(true);
} lain {
setCopied(false);
console.error(
Tidak boleh menyalin jenis ${typeof text} ke papan keratan, mestilah rentetan atau nombor.
);
}
}

kembali [isCopied, handleCopy];
}
Cara menggunakan useCopyToClipboard
Kini kami boleh menggunakan useCopyToClipboard dalam mana-mana komponen yang kami suka.

Dalam kes saya, saya akan menggunakannya dengan komponen butang salin yang menerima kod untuk coretan kod kami.

Untuk membuat ini berfungsi, kita hanya perlu menambah klik pada butang. Dan dalam pemulangan fungsi yang dipanggil salinan pemegang dengan kod yang diminta kepadanya sebagai teks. Dan apabila ia disalin ia adalah benar. Kami boleh menunjukkan ikon berbeza yang menunjukkan salinan berjaya.

import React daripada "react";
import ClipboardIcon daripada "../svg/ClipboardIcon";
import SuccessIcon daripada "../svg/SuccessIcon";
import useCopyToClipboard daripada "../utils/useCopyToClipboard";

fungsi CopyButton({ kod }) {
const [isCopied, handleCopy] = useCopyToClipboard();

kembali (
handleCopy(kod)}>
{isCopied ? : }

);
}
Bagaimana untuk menambah selang set semula
Terdapat satu peningkatan yang boleh kami lakukan pada kod kami. Memandangkan kami telah menulis cangkuk kami, isCopied akan sentiasa benar, bermakna kami akan sentiasa melihat ikon kejayaan:

gif-gif.gif
Jika kami ingin menetapkan semula keadaan kami selepas beberapa saat, anda boleh melepasi selang masa untuk menggunakanCopyToClipboard. Mari tambahkan fungsi itu.

Kembali dalam cangkuk kami, kami boleh mencipta parameter yang dipanggil resetInterval, yang nilai lalainya adalah nol, yang akan memastikan keadaan tidak akan ditetapkan semula jika tiada hujah dihantar kepadanya.

Kami kemudiannya akan menambah useEffect untuk mengatakan bahawa jika teks disalin dan kami mempunyai selang set semula, kami akan menetapkan isCopied kembali kepada false selepas selang itu menggunakan setTimeout.

Selain itu, kami perlu mengosongkan tamat masa itu jika komponen kami bahawa cangkuk sedang digunakan dalam dinyahlekap (bermaksud keadaan kami tidak ada lagi untuk mengemas kini).

import React daripada "react";
import salinan daripada "copy-to-clipboard";

eksport fungsi lalai useCopyToClipboard(resetInterval = null) {
const [isCopied, setCopied] = React.useState(false);

const handleCopy = React.useCallback((text) => {
if (jenis teks === "rentetan" || jenis teks == "nombor") {
copy(text.toString());
setCopied(true);
} lain {
setCopied(false);
console.error(
Tidak boleh menyalin jenis ${typeof text} ke papan keratan, mestilah rentetan atau nombor.
);
}
}, []);

React.useEffect(() => {
biarkan tamat masa;
if (isCopied && reset Interval) {
tamat masa = setTimeout(() => setCopied(false), resetInterval);
}
pulangan () => {
clearTimeout(timeout);
};
}, [isCopied, resetInterval]);

kembali [isCopied, handleCopy];
}
Akhir sekali, penambahbaikan terakhir yang boleh kami lakukan ialah membungkus handleCopy dalam cangkuk useCallback untuk memastikan ia tidak akan dicipta semula setiap kali terdapat penyampaian semula.

Keputusan Akhir
Dan dengan itu, kami mempunyai cangkuk terakhir kami yang membolehkan keadaan ditetapkan semula selepas selang masa tertentu. Jika kita melepasinya, kita sepatutnya melihat hasil seperti yang kita ada di bawah.

import React daripada "react";
import ClipboardIcon daripada "../svg/ClipboardIcon";
import SuccessIcon daripada "../svg/SuccessIcon";
import useCopyToClipboard daripada "../utils/useCopyToClipboard";

fungsi CopyButton({ kod }) {
// isCopied ditetapkan semula selepas tamat masa 3 saat
const [isCopied, handleCopy] = useCopyToClipboard(3000);

kembali (
handleCopy(kod)}>
{isCopied ? : }

);
}
keputusan akhir.gif

1. usePageBottom Hook Dalam apl React, kadangkala adalah penting untuk mengetahui apabila pengguna anda telah menatal ke bahagian bawah halaman.

Dalam apl yang anda mempunyai tatal tak terhingga, seperti Instagram contohnya, sebaik sahaja pengguna mencapai bahagian bawah halaman, anda perlu mengambil lebih banyak siaran.

Tatal tak terhingga dalam Instagram
Mari lihat cara membuat sendiri cangkuk usePageBottom untuk kes penggunaan yang serupa seperti membuat skrol tak terhingga.

Kami akan mulakan dengan membuat fail berasingan, usePageBottom.js, dalam folder utils kami dan kami akan menambah fungsi (cangkuk) dengan nama yang sama:

// utils/usePageBottom.js
import React daripada "react";

eksport fungsi lalai usePageBottom() {}

Seterusnya, kami perlu mengira apabila pengguna kami mencapai bahagian bawah halaman. Kita boleh menentukan ini dengan maklumat dari tetingkap. Untuk mengakses ini, kami perlu memastikan komponen kami yang cangkuk dipanggil di dalamnya dipasang, jadi kami akan menggunakan cangkuk useEffect dengan tatasusunan dependensi kosong.

// utils/usePageBottom.js
import React daripada "react";

eksport fungsi lalai usePageBottom() {
React.useEffect(() => {}, []);
}

Pengguna akan menatal ke bahagian bawah halaman apabila nilai innerHeight tetingkap ditambah nilai scrollTop dokumen adalah sama dengan offsetHeight. Jika kedua-dua nilai tersebut adalah sama, hasilnya akan menjadi benar dan pengguna telah menatal ke bahagian bawah halaman:

// utils/usePageBottom.js
import React daripada "react";

eksport fungsi lalai usePageBottom() {
React.useEffect(() => {
window.innerHeight + document.documentElement.scrollTop ===
document.documentElement.offsetHeight;
}, []);
}

Kami akan menyimpan hasil ungkapan ini dalam pembolehubah, isBottom dan kami akan mengemas kini pembolehubah keadaan yang dipanggil bawah, yang akhirnya kami akan kembali dari cangkuk kami.

// utils/usePageBottom.js
import React daripada "react";

eksport fungsi lalai usePageBottom() {
const [bawah, setBottom] = React.useState(false);

React.useEffect(() => {
const isBottom =
window.innerHeight + document.documentElement.scrollTop ===
document.documentElement.offsetHeight;
setBottom(isButton);
}, []);

kembali bahagian bawah;
}

Kod kami yang sedia ada, bagaimanapun, tidak akan berfungsi. Kenapa tidak?

Isunya terletak pada hakikat bahawa kita perlu mengira isBottom setiap kali pengguna menatal. Akibatnya, kita perlu mendengar acara tatal dengan window.addEventListener. Kita boleh menilai semula ungkapan ini dengan mencipta fungsi setempat untuk dipanggil setiap kali pengguna menatal, dipanggil handleScroll.

// utils/usePageBottom.js
import React daripada "react";

eksport fungsi lalai usePageBottom() {
const [bawah, setBottom] = React.useState(false);

React.useEffect(() => {
pemegang fungsiSkrol() {
const isBottom =
window.innerHeight + document.documentElement.scrollTop
=== document.documentElement.offsetHeight;
setBottom(isButton);
}
window.addEventListener("scroll", handleScroll);
}, []);

kembali bahagian bawah;
}

Akhir sekali, memandangkan kami mempunyai pendengar acara yang sedang mengemas kini keadaan, kami perlu mengendalikan acara yang pengguna kami menavigasi keluar dari halaman dan komponen kami dialih keluar. Kami perlu mengalih keluar pendengar acara tatal yang kami tambahkan, jadi kami tidak cuba mengemas kini pembolehubah keadaan yang tidak wujud lagi.

Kita boleh melakukan ini dengan mengembalikan fungsi daripada useEffect bersama dengan window.removeEventListener, di mana kita menghantar rujukan kepada fungsi handleScroll yang sama. Dan kami sudah selesai.

// utils/usePageBottom.js
import React daripada "react";

eksport fungsi lalai usePageBottom() {
const [bawah, setBottom] = React.useState(false);

React.useEffect(() => {
pemegang fungsiSkrol() {
const isBottom =
window.innerHeight + document.documentElement.scrollTop
=== document.documentElement.offsetHeight;
setBottom(isButton);
}
window.addEventListener("scroll", handleScroll);
pulangan () => {
window.removeEventListener("scroll", handleScroll);
};
}, []);

kembali bahagian bawah;
}

Kini kita boleh memanggil kod ini dalam mana-mana fungsi yang kita ingin tahu sama ada kita telah mencapai bahagian bawah halaman atau tidak.

Dalam tapak Gatsby saya, saya mempunyai pengepala, dan semasa saya mengecilkan saiz halaman, saya mahu menunjukkan lebih sedikit pautan.

mengubah saiz tetingkap untuk menunjukkan pengepala
Untuk melakukan ini, kami boleh menggunakan pertanyaan media (CSS), atau kami boleh menggunakan cangkuk React tersuai untuk memberi kami saiz semasa halaman dan menyembunyikan atau menunjukkan pautan dalam JSX kami.

Sebelum ini, saya menggunakan cangkuk daripada perpustakaan yang dipanggil react-use. Daripada membawa keseluruhan perpustakaan pihak ketiga, saya memutuskan untuk mencipta cangkuk saya sendiri yang akan memberikan dimensi tetingkap, kedua-dua lebar dan tinggi. Saya memanggil cangkuk ini menggunakanWindowSize.

Cara mencipta cangkuk
Mula-mula, kami akan mencipta fail baharu .js dalam folder utiliti (utils) kami, nama yang sama dengan cangkuk useWindowSize. Saya akan mengimport React (untuk menggunakan cangkuk) semasa mengeksport cangkuk tersuai.

// utils/useWindowSize.js

import React daripada "react";

eksport fungsi lalai useWindowSize() {}

Sekarang kerana saya menggunakan ini dalam tapak Gatsby, yang diberikan pelayan, saya perlu mendapatkan saiz tetingkap. Tetapi kami mungkin tidak mempunyai akses kepadanya kerana kami berada di pelayan.

Untuk menyemak dan memastikan kami tidak berada di pelayan, kami boleh melihat sama ada jenis tetingkap tidak sama dengan rentetan yang tidak ditentukan.

Dalam hal ini kita boleh kembali kepada lebar dan ketinggian lalai untuk penyemak imbas, katakan, 1200 dan 800 dalam objek:

// utils/useWindowSize.js

import React daripada "react";

eksport fungsi lalai useWindowSize() {
jika (jenis tetingkap !== "tidak ditentukan") {
kembali { lebar: 1200, tinggi: 800 };
}
}

Bagaimana untuk mendapatkan lebar dan tinggi dari tingkap
Dan dengan mengandaikan kami berada pada pelanggan dan boleh mendapatkan tetingkap, kami boleh menggunakan cangkuk useEffect untuk melakukan kesan sampingan dengan berinteraksi dengan tetingkap. Kami akan memasukkan tatasusunan kebergantungan kosong untuk memastikan fungsi kesan dipanggil hanya setelah komponen (yang cangkuk ini dipanggil) dipasang.

Untuk mengetahui lebar dan ketinggian tetingkap, kami boleh menambah pendengar acara dan mendengar acara ubah saiz. Dan apabila saiz penyemak imbas berubah, kami boleh mengemas kini sekeping keadaan (dicipta dengan useState), yang akan kami panggil windowSize, dan penetap untuk mengemas kininya ialah setWindowSize.

// utils/useWindowSize.js

import React daripada "react";

eksport fungsi lalai useWindowSize() {
jika (jenis tetingkap !== "tidak ditentukan") {
kembali { lebar: 1200, tinggi: 800 };
}

const [windowSize, setWindowSize] = React.useState();

React.useEffect(() => {
window.addEventListener("ubah saiz", () => {
setWindowSize({ width: window.innerWidth, height: window.innerHeight });
});
}, []);
}

Apabila saiz tetingkap diubah, panggilan balik akan dipanggil dan keadaan saiz tetingkap akan dikemas kini dengan dimensi tetingkap semasa. Untuk mendapatkannya, kami menetapkan lebar kepada window.innerWidth dan ketinggian kepada window.innerHeight.

Cara menambah sokongan SSR
Walau bagaimanapun, kod seperti yang kami ada di sini tidak akan berfungsi. Ini kerana peraturan utama cangkuk ialah ia tidak boleh dipanggil secara bersyarat. Akibatnya, kita tidak boleh mempunyai syarat di atas useState atau useEffect cangkuk sebelum ia dipanggil.

Jadi untuk membetulkannya, kami akan menetapkan nilai awal useState secara bersyarat. Kami akan mencipta pembolehubah yang dipanggil isSSR, yang akan melakukan semakan yang sama untuk melihat sama ada tetingkap itu tidak sama dengan rentetan yang tidak ditentukan.

Dan kami akan menggunakan ternary untuk menetapkan lebar dan tinggi dengan menyemak terlebih dahulu untuk melihat sama ada kami berada di pelayan. Jika kami, kami akan menggunakan nilai lalai, dan jika tidak, kami akan menggunakan window.innerWidth dan window.innerHeight.

// utils/useWindowSize.js

import React daripada "react";

eksport fungsi lalai useWindowSize() {
// if (typeof window !== "undefined") {
// return { lebar: 1200, tinggi: 800 };
// }
const isSSR = jenis tetingkap !== "undefined";
const [windowSize, setWindowSize] = React.useState({
lebar: isSSR ? 1200 : window.innerWidth,
ketinggian: isSSR ? 800 : tingkap.innerHeight,
});

React.useEffect(() => {
window.addEventListener("ubah saiz", () => {
setWindowSize({ width: window.innerWidth, height: window.innerHeight });
});
}, []);
}

Kemudian, akhirnya, kita perlu memikirkan apabila komponen kita dinyahlekap. Apa yang perlu kita lakukan? Kami perlu mengalih keluar pendengar ubah saiz kami.

Cara mengalih keluar pendengar acara ubah saiz
Anda boleh melakukannya dengan mengembalikan fungsi daripada useEffectand. Kami akan mengalih keluar pendengar dengan window.removeEventListener.

// utils/useWindowSize.js

import React daripada "react";

eksport fungsi lalai useWindowSize() {
// if (typeof window !== "undefined") {
// return { lebar: 1200, tinggi: 800 };
// }
const isSSR = jenis tetingkap !== "undefined";
const [windowSize, setWindowSize] = React.useState({
lebar: isSSR ? 1200 : window.innerWidth,
ketinggian: isSSR ? 800 : tingkap.innerHeight,
});

React.useEffect(() => {
window.addEventListener("ubah saiz", () => {
setWindowSize({ width: window.innerWidth, height: window.innerHeight });
});

return () => {
  window.removeEventListener("resize", () => {
    setWindowSize({ width: window.innerWidth, height: window.innerHeight });
  });
};

}, []);
}

Tetapi kita memerlukan rujukan kepada fungsi yang sama, bukan dua yang berbeza seperti yang kita ada di sini. Untuk berbuat demikian, kami akan mencipta fungsi panggil balik yang dikongsi kepada kedua-dua pendengar yang dipanggil changeWindowSize.

Dan akhirnya, pada penghujung cangkuk, kami akan mengembalikan keadaan windowSize kami. Dan itu sahaja.

// utils/useWindowSize.js

import React daripada "react";

eksport fungsi lalai useWindowSize() {
const isSSR = jenis tetingkap !== "undefined";
const [windowSize, setWindowSize] = React.useState({
lebar: isSSR ? 1200 : window.innerWidth,
ketinggian: isSSR ? 800 : tingkap.innerHeight,
});

perubahan fungsiWindowSize() {
setWindowSize({ width: window.innerWidth, height: window.innerHeight });
}

React.useEffect(() => {
window.addEventListener("resize", changeWindowSize);

return () => {
  window.removeEventListener("resize", changeWindowSize);
};

}, []);

kembali Saiz tetingkap;
}

Keputusan Akhir
Untuk menggunakan cangkuk, kita hanya perlu mengimportnya di tempat yang kita perlukan, memanggilnya dan menggunakan lebarnya di mana-mana sahaja yang kita mahu sembunyikan atau tunjukkan elemen tertentu.

Dalam kes saya, ini adalah pada tanda 500px. Di sana, saya ingin menyembunyikan semua pautan lain dan hanya menunjukkan butang Sertai Sekarang, seperti yang anda lihat dalam contoh di atas:

// komponen/StickyHeader.js

import React daripada "react";
import useWindowSize daripada "../utils/useWindowSize";

fungsi StickyHeader() {
const { width } = useWindowSize();

kembali (

{/* hanya kelihatan apabila tetingkap lebih besar daripada 500px /}
{lebar > 500 && (
<>

Testimoni


Harga



Soalan?



)}
{/ kelihatan pada sebarang saiz tetingkap */}


Sertai Sekarang



);
}

Cakuk ini akan berfungsi pada mana-mana apl React yang diberikan pelayan, seperti Gatsby dan Next.js.

1. gunakan CangkukDeviceDetect Saya sedang dalam proses membina halaman pendaratan baharu untuk kursus saya, dan saya mengalami ralat yang sangat pelik pada peranti mudah alih. Pada komputer meja, gaya kelihatan hebat.

Tetapi apabila saya melihat pada telefon bimbit, semuanya tidak bertempat dan rosak.

Ralat Apl React
Saya menjejaki masalah itu ke satu perpustakaan yang dipanggil react-device-detect yang saya gunakan untuk mengesan sama ada pengguna mempunyai peranti mudah alih atau tidak. Jika ya, saya akan mengalih keluar pengepala.

// templat/kursus.js
import React daripada "react";
import { isMobile } daripada "react-device-detect";

kursus fungsi() {
kembali (
<>

{!is Mudah Alih && }
{/* lagi komponen... */}

);
}

Masalahnya ialah pustaka ini tidak mempunyai sokongan untuk pemaparan sebelah pelayan, yang digunakan oleh Gatsby secara lalai. Jadi saya perlu mencipta penyelesaian saya sendiri untuk menyemak apabila pengguna menggunakan peranti mudah alih. Dan untuk itu, saya memutuskan untuk membuat cangkuk tersuai dengan nama useDeviceDetect.

Cara saya mencipta Cangkuk
Saya mencipta fail berasingan untuk cangkuk ini dalam folder utils saya dengan nama yang sama, useDeviceDetect.js. Memandangkan cangkuk hanyalah fungsi JavaScript yang boleh dikongsi, yang memanfaatkan cangkuk React, saya mencipta fungsi yang dipanggil useDeviceDetect dan mengimport React.

// utils/useDeviceDetect.js
import React daripada "react";

eksport fungsi lalai useDeviceDetect() {}

Bagaimana untuk mendapatkan ejen pengguna dari tetingkap
Cara kami boleh memastikan sama ada kami boleh mendapatkan maklumat tentang peranti pengguna adalah melalui sifat userAgent (terletak pada sifat navigator window).

Dan kerana berinteraksi dengan API tetingkap sebagai API / sumber luaran akan dikelaskan sebagai kesan sampingan, kami perlu mendapatkan akses kepada ejen pengguna dalam cangkuk useEffect.

// utils/useDeviceDetect.js
import React daripada "react";

eksport fungsi lalai useDeviceDetect() {
React.useEffect(() => {
console.log(peranti pengguna ialah: ${window.navigator.userAgent});
// juga boleh ditulis sebagai 'navigator.userAgent'
}, []);
}

Setelah komponen dipasang, kita boleh menggunakan typeof navigator untuk menentukan sama ada kita berada pada klien atau pelayan. Jika kami berada di pelayan, kami tidak akan mempunyai akses kepada tetingkap. typeof navigator akan sama dengan rentetan yang tidak ditentukan kerana ia tidak ada di sana. Jika tidak, jika kami menggunakan pelanggan, kami akan dapat mendapatkan harta ejen pengguna kami.

Kami boleh menyatakan semua ini menggunakan ternary untuk mendapatkan data userAgent:

// utils/useDeviceDetect.js
import React daripada "react";

eksport fungsi lalai useDeviceDetect() {
React.useEffect(() => {
const userAgent =
typeof navigator === "undefined" ? "" : navigator.userAgent;
}, []);
}

Cara menyemak sama ada userAgent ialah peranti mudah alih
userAgent ialah nilai rentetan yang akan ditetapkan kepada mana-mana nama peranti berikut jika mereka menggunakan peranti mudah alih:

Android, BlackBerry, iPhone, iPad, iPod, Opera Mini, IEMobile atau WPDesktop.

Apa yang perlu kita lakukan ialah mengambil rentetan yang kita dapat dan gunakan kaedah .match() dengan regex untuk melihat sama ada rentetan itu merupakan salah satu daripada rentetan ini. Kami akan menyimpannya dalam pembolehubah tempatan yang dipanggil mudah alih.

Kami akan menyimpan hasil dalam keadaan dengan cangkuk useState, yang akan kami berikan nilai awal palsu. Untuk itu, kami akan mencipta pembolehubah keadaan yang sepadan ialah Mudah Alih, dan penetap akan ditetapkan Mudah Alih.

// utils/useDeviceDetect.js
import React daripada "react";

eksport fungsi lalai useDeviceDetect() {
const [isMobile, setMobile] = React.useState(false);

React.useEffect(() => {
const userAgent =
typeof window.navigator === "undefined" ? "" : navigator.userAgent;
mudah alih const = Boolean(
userAgent.match(
/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i
)
);
setMobile(mudah alih);
}, []);
}

Jadi sebaik sahaja kami mendapat nilai mudah alih kami akan menetapkannya dalam keadaan. Kemudian akhirnya kami akan mengembalikan objek daripada cangkuk supaya kami boleh menambah lebih banyak nilai pada masa hadapan jika kami mahu memilih untuk menambah lebih banyak fungsi pada cangkuk ini.

Di dalam objek, kami akan menambah isMobile sebagai harta dan nilai:

// utils/useDeviceDetect.js
import React daripada "react";

eksport fungsi lalai useDeviceDetect() {
const [isMobile, setMobile] = React.useState(false);

React.useEffect(() => {
const userAgent =
typeof window.navigator === "undefined" ? "" : navigator.userAgent;
mudah alih const = Boolean(
userAgent.match(
/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i
)
);
setMobile(mudah alih);
}, []);

kembali { isMobile };
}

Keputusan Akhir
Kembali ke halaman pendaratan kita boleh melaksanakan cangkuk dan hanya mendapatkan harta itu daripada objek yang dimusnahkan dan menggunakannya di tempat yang kita perlukan.

// templat/kursus.js
import React daripada "react";
import useDeviceDetect daripada "../utils/useDeviceDetect";

kursus fungsi() {
const { isMobile } = useDeviceDetect();

kembali (
<>

{!is Mudah Alih && }
{/* lagi komponen... */}

);
}

Kesimpulan
Seperti yang saya cuba gambarkan melalui setiap contoh ini, cangkuk React tersuai boleh memberi kita alat untuk menyelesaikan masalah kita sendiri apabila perpustakaan pihak ketiga gagal.

Saya harap panduan ini telah memberi anda idea yang lebih baik tentang masa dan cara mencipta cangkuk React anda sendiri. Jangan ragu untuk menggunakan mana-mana cangkuk ini dan kod di atas dalam projek anda sendiri dan sebagai inspirasi untuk cangkuk React tersuai anda sendiri.

Atas ialah kandungan terperinci Cara Membina Cangkuk Reaksi Anda Sendiri: Panduan Langkah demi Langkah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!