Bagaimana untuk membuat tab dalam ReactJS?

ReactJS ialah perpustakaan JavaScript yang popular untuk membina antara muka pengguna. Ia menyediakan pendekatan berasaskan komponen kepada pembangunan web yang memudahkan untuk mencipta elemen UI interaktif dan dinamik. Tab ialah corak UI biasa yang digunakan untuk menyusun dan mempersembahkan kandungan dengan cara yang mesra pengguna. Dalam artikel ini, kami akan meneroka cara membuat komponen tab dalam ReactJS.

Prasyarat

Sebelum membaca artikel ini, anda harus mempunyai pemahaman asas tentang ReactJS dan konsep terasnya. Pastikan Node.js dan npm (pengurus pakej nod) dipasang pada komputer anda.

Sediakan projek React baharu

Mula-mula, mari buat projek React baharu menggunakan Aplikasi Buat React, alat yang membantu dalam mencipta projek React baharu dengan struktur projek asas. Buka terminal dan jalankan arahan berikut:

npx create-react-app tab-example

Kaedah 1: Gunakan UseRef Hook

useRef cangkuk ialah cangkuk React terbina dalam yang membolehkan kami membuat rujukan boleh ubah kepada elemen dalam komponen. Kita boleh menggunakannya untuk mengurus keadaan tab aktif dalam komponen tab.

Contoh

Dalam kod di bawah, kami mula-mula mengimport kebergantungan yang diperlukan dan menyediakan tab komponen berfungsi kami. Di dalam komponen, kami mencipta cangkuk useRef yang dipanggil tabsRef untuk menyimpan pelbagai objek tab. Ini membolehkan kami merujuk tab dan sifatnya. Kami juga menggunakan cangkuk useState untuk mencipta pembolehubah keadaan yang dipanggil activeTab untuk menjejaki tab yang sedang aktif. Fungsi handleTabClick bertanggungjawab untuk mengemas kini keadaan ActiveTab apabila tab diklik. Fungsi renderTabs berulang pada tatasusunan tabsRef.current dan menjadikan tajuk tab. Ia menambahkan kelas "Aktiviti" pada tab yang sedang aktif. Akhir sekali, kami mengembalikan penanda JSX untuk tab dan kandungan tab aktif.

import React, { useRef, useState } from 'react';
import './Tabs.css'; // Import the CSS file
const Tabs = () => {
  const tabsRef = useRef([{ title: 'Tab 1', content: 'Content 1' },
  { title: 'Tab 2', content: 'Content 2' },
  { title: 'Tab 3', content: 'Content 3' }]);
  const [activeTab, setActiveTab] = useState(0);

  const handleTabClick = (index) => {
    setActiveTab(index);
  };

  const renderTabs = () => {
    return tabsRef.current.map((tab, index) => (
      <div
        key={index}
        onClick={() => handleTabClick(index)}
        className={activeTab === index ? 'active' : ''}
      >
        {tab.title}
      </div>
    ));
  };

  return (
    <div className="tabs-container">
      {renderTabs()}
      <div className="tab-content">
        {tabsRef.current[activeTab].content}
      </div>
    </div>
  );
};

export default Tabs;
  return (
    <div className="tabs-container">
      {renderTabs()}
      <div className="tab-content">
        {tabsRef.current[activeTab].content}
      </div>
    </div>
  );
};

export default Tabs;

Output

Kaedah 2: Gunakan useReducer Hook

useReducer hook ialah satu lagi cangkuk React terbina dalam yang menyediakan cara untuk mengurus logik keadaan kompleks dengan cara yang lebih teratur. Kami boleh menggunakan cangkuk ini untuk mengendalikan perubahan keadaan tab.

Contoh

Dalam kod di bawah, kami memulakan objek keadaan dengan tatasusunan "tab" kosong dan menetapkan sifat "activeTab" kepada 0. Dengan memulakan objek keadaan dengan betul, kami memastikan tatasusunan "state.tabs" tidak ditakrifkan, membolehkan kami memetakannya dan mengakses objek tab dan sifatnya.

Sintaks "?.content" yang digunakan dalam div "tab-content" memastikan bahawa sifat kandungan hanya diakses apabila objek tab semasa ditakrifkan. Ini menghalang ralat semasa menukar tab.

Anda boleh menyesuaikan pembentangan tajuk tab dan kandungan berdasarkan keperluan reka bentuk khusus anda.

import React, { useReducer } from 'react';

const reducer = (state, action) => {
  switch (action.type) {
    case 'SET_ACTIVE_TAB':
      return { ...state, activeTab: action.payload };
    default:
      return state;
  }
};

const Tabs = () => {
  const [state, dispatch] = useReducer(reducer, { tabs: [{ title: 'Tab 1', content: 'Content 1' },
  { title: 'Tab 2', content: 'Content 2' },
  { title: 'Tab 3', content: 'Content 3' }
], activeTab: 0 });

  const handleTabClick = (index) => {
    dispatch({ type: 'SET_ACTIVE_TAB', payload: index });
  };

  const renderTabs = () => {
    return state.tabs.map((tab, index) => (
      <div
        key={index}
        onClick={() => handleTabClick(index)}
        className={state.activeTab === index ? 'active' : ''}
      >
        {tab.title}
      </div>
    ));
  };

  return (
    <div className="tabs-container">
      {renderTabs()}
      <div className="tab-content">{state.tabs[state.activeTab]?.content}</div>
    </div>
  );
};

export default Tabs;

Output

Kaedah 3: Menggunakan Keadaan dan Props

Kaedah ketiga melibatkan penggunaan keadaan dan sifat komponen untuk mengurus tab aktif. Kaedah ini lebih sesuai untuk kes mudah di mana logik tab tidak terlalu kompleks.

Contoh

Dalam kod di bawah, kami mentakrifkan tatasusunan "tab" dalam komponen tab untuk menyediakan data yang diperlukan untuk tajuk dan kandungan tab. Dengan mentakrifkan tatasusunan "tab" dalam komponen, kami memastikan ia boleh diakses dalam skop komponen. Cangkuk useState digunakan untuk mengurus keadaan tab aktif, dengan nilai awal ditetapkan kepada 0. Fungsi handleTabClick mengemas kini tab aktif apabila tab diklik. Fungsi renderTabs memetakan tatasusunan "tab" dan memaparkan tajuk tab. Kelas "aktif" digunakan pada tab aktif berdasarkan keadaan ActiveTab.

Div kandungan tab memaparkan kandungan tab yang sedang aktif.

import React, { useState } from 'react';

const Tabs = () => {
  const [activeTab, setActiveTab] = useState(0);

  // Define the tabs array within the component
  const tabs = [
    { title: 'Tab 1', content: 'Content 1' },
    { title: 'Tab 2', content: 'Content 2' },
    { title: 'Tab 3', content: 'Content 3' }
  ];

  const handleTabClick = (index) => {
    setActiveTab(index);
  };

  const renderTabs = () => {
    return tabs.map((tab, index) => (
      <div
        key={index}
        onClick={() => handleTabClick(index)}
        className={activeTab === index ? 'active' : ''}
      >
        {tab.title}
      </div>
    ));
  };

  return (
    <div className="tabs-container">
      {renderTabs()}
      <div className="tab-content">{tabs[activeTab]?.content}</div>
    </div>
  );
};

export default Tabs;

Output

KESIMPULAN

Dalam artikel ini, kami membincangkan cara membuat tab dalam Reactjs. Kami memperkenalkan bahawa cangkuk useRef berguna untuk mengurus rujukan boleh ubah, cangkuk useReducer menyediakan pendekatan yang lebih berstruktur untuk pengurusan keadaan, dan kaedah keadaan dan prop sesuai untuk pelaksanaan tab yang lebih mudah. Dengan memahami teknik ini, anda boleh mencipta komponen tab interaktif dan mesra pengguna dalam aplikasi React anda.

Atas ialah kandungan terperinci Bagaimana untuk membuat tab dalam ReactJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!