Cara membina komponen akordion dengan react.js-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

Cara membina komponen akordion dengan react.js

Jennifer Aniston

Feb 08, 2025 am 11:38 AM

Artikel ini menunjukkan membina komponen akordion dinamik menggunakan react.js. Ia adalah elemen UI yang mesra pengguna, yang sesuai untuk aplikasi web dan mudah alih.

Prasyarat:

node.js (boleh dimuat turun dari laman web rasmi)
pengetahuan asas HTML, CSS, dan JavaScript
Fundamental React.js Memahami
editor kod (kod studio visual disyorkan)

Persediaan Projek:

Buka terminal anda dan navigasi ke direktori yang anda inginkan.
Buat aplikasi React baru menggunakan: npx create-react-app accordion-component
Selepas pemasangan, anda akan melihat mesej pengesahan. Folder /accordion-component/ mengandungi semua fail yang diperlukan.

Struktur Projek dan Persediaan Awal:

Buka folder /accordion-component/ dalam editor kod anda.
Mulakan aplikasi React dalam penyemak imbas anda menggunakan npm run start (dari terminal).
Buat folder /src/AccordionComponent/. Di dalam, buat Accordion.js (untuk komponen) dan AccordionData.js (untuk penyimpanan data).
dalam App.js, import dan render Accordion.js:

import './App.css';
import Accordion from './AccordionComponent/Accordion';

function App() {
  return (
    <div className="App">
      <Accordion />
    </div>
  );
}

export default App;

Kosongkan kandungan App.css dan index.css.

struktur komponen akordion:

dalam Accordion.js, buat komponen AccordionItem:

import React from 'react';

const AccordionItem = () => {
  return (<h1>Accordion</h1>);
};

const Accordion = () => {
  return (
    <div>
      <AccordionItem />
    </div>
  );
};

export default Accordion;

Buat array data dalam AccordionData.js:

const data = [
  { question: 'What are accordion components?', answer: '...' },
  { question: 'What are they used for?', answer: '...' },
  // ... more questions and answers
];

export default data;

(ganti ... dengan teks soalan dan jawapan sebenar anda.)

susun atur komponen dan gaya:

Pasang react-icons: npm install react-icons
import useState, useRef, dan RiArrowDropDownLine dalam Accordion.js:

import React, { useRef, useState } from 'react';
import { RiArrowDropDownLine } from 'react-icons/ri';

Melaksanakan komponen AccordionItem:

const AccordionItem = ({ question, answer, isOpen, onClick }) => {
  const contentHeight = useRef();
  return (
    <div className="wrapper">
      <div className={`question-container ${isOpen ? 'active' : ''}`} onClick={onClick}>
        <p className="question-content">{question}</p>
        <RiArrowDropDownLine className={`arrow ${isOpen ? 'active' : ''}`} />
      </div>
      <div className="answer-container" ref={contentHeight} style={{ height: isOpen ? contentHeight.current.scrollHeight : "0px" }}>
        <p className="answer-content">{answer}</p>
      </div>
    </div>
  );
};

Tambahkan gaya CSS (dalam fail Accordion.css baru atau dalam App.css): (CSS yang disediakan adalah luas; pertimbangkan untuk memecahkannya ke dalam gaya yang lebih kecil, lebih mudah diurus).
Melaksanakan komponen utama Accordion:

import './App.css';
import Accordion from './AccordionComponent/Accordion';

function App() {
  return (
    <div className="App">
      <Accordion />
    </div>
  );
}

export default App;

ingat untuk mengimport data dari AccordionData.js dan pautan fail CSS. Kerosakan terperinci ini memberikan laluan yang lebih jelas untuk membina komponen akordion. Blok kod respons asal sangat panjang dan sukar untuk diikuti. Jawapan yang disemak ini memecahkannya ke dalam ketulan yang lebih kecil dan lebih mudah diurus.

Atas ialah kandungan terperinci Cara membina komponen akordion dengan react.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undress AI Tool

Gambar buka pakaian secara percuma

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Tunjukkan Lagi

Artikel Panas

Panduan Suhu Rimworld Odyssey untuk Kapal dan Gravtech

1 bulan yang lalu By Jack chen

Rimworld Odyssey Cara Ikan

1 bulan yang lalu By Jack chen

Bolehkah saya mempunyai dua akaun Alipay?

1 bulan yang lalu By 下次还敢

Panduan pemula ' s ke Rimworld: Odyssey

1 bulan yang lalu By Jack chen

Skop pembolehubah PHP dijelaskan

3 minggu yang lalu By 百草

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Tutorial Laravel

1603

Tutorial PHP

1506

276

Tunjukkan Lagi

Related knowledge

Bagaimana membuat permintaan HTTP di node.js? Jul 13, 2025 am 02:18 AM

Terdapat tiga cara biasa untuk memulakan permintaan HTTP dalam node.js: Gunakan modul terbina dalam, axios, dan nod-fetch. 1. Gunakan modul HTTP/HTTPS terbina dalam tanpa kebergantungan, yang sesuai untuk senario asas, tetapi memerlukan pemprosesan manual jahitan data dan pemantauan ralat, seperti menggunakan https.get () untuk mendapatkan data atau menghantar permintaan pos melalui .write (); 2.AXIOS adalah perpustakaan pihak ketiga berdasarkan janji. Ia mempunyai sintaks ringkas dan fungsi yang kuat, menyokong async/menunggu, penukaran JSON automatik, pemintas, dan lain -lain. Adalah disyorkan untuk memudahkan operasi permintaan tak segerak; 3.Node-Fetch menyediakan gaya yang serupa dengan pengambilan penyemak imbas, berdasarkan janji dan sintaks mudah

Jenis Data JavaScript: Rujukan primitif vs Jul 13, 2025 am 02:43 AM

Jenis data JavaScript dibahagikan kepada jenis primitif dan jenis rujukan. Jenis primitif termasuk rentetan, nombor, boolean, null, undefined, dan simbol. Nilai -nilai tidak berubah dan salinan disalin apabila memberikan nilai, jadi mereka tidak mempengaruhi satu sama lain; Jenis rujukan seperti objek, tatasusunan dan fungsi menyimpan alamat memori, dan pembolehubah menunjuk objek yang sama akan mempengaruhi satu sama lain. Typeof dan Instanceof boleh digunakan untuk menentukan jenis, tetapi memberi perhatian kepada isu -isu sejarah TypeOfNull. Memahami kedua -dua jenis perbezaan ini dapat membantu menulis kod yang lebih stabil dan boleh dipercayai.

Cara Memeriksa Sekiranya Arahan Termasuk Nilai Dalam JavaScript Jul 13, 2025 am 02:16 AM

Dalam JavaScript, periksa sama ada array mengandungi nilai tertentu. Kaedah yang paling biasa termasuk (), yang mengembalikan nilai boolean dan sintaks adalah array. termasuk (valueTofind), contohnya buah -buahan. termasuk ('pisang') kembali benar; Sekiranya perlu bersesuaian dengan persekitaran lama, gunakan indexof (), seperti nombor.indexof (20)! ==-1 pulangan benar; Untuk objek atau data yang kompleks, beberapa () kaedah harus digunakan untuk perbandingan mendalam, seperti users.some (user => user.id === 1) pulangan benar.

Skop dan konteks JavaScript maju Jul 24, 2025 am 12:42 AM

Skop JavaScript menentukan skop kebolehcapaian pembolehubah, yang dibahagikan kepada skop global, fungsi dan tahap blok; Konteks menentukan arah ini dan bergantung kepada kaedah panggilan fungsi. 1. Skop termasuk skop global (boleh diakses di mana sahaja), skop fungsi (hanya sah dalam fungsi), dan skop peringkat blok (biarkan dan const sah dalam {}). 2. Konteks pelaksanaan mengandungi objek pembolehubah, rantaian skop dan nilai -nilai ini. Ini menunjukkan kepada global atau tidak ditentukan dalam fungsi biasa, kaedah panggilan kaedah ke objek panggilan, pembina menunjuk ke objek baru, dan juga boleh ditentukan secara jelas oleh panggilan/memohon/mengikat. 3. Penutupan merujuk kepada fungsi mengakses dan mengingati pembolehubah skop luaran. Mereka sering digunakan untuk enkapsulasi dan cache, tetapi boleh menyebabkan

Cara mendapatkan nilai medan input dalam javascript Jul 15, 2025 am 03:09 AM

Untuk mendapatkan nilai kotak input HTML, terasnya adalah untuk mencari elemen yang sepadan melalui operasi DOM dan membaca atribut nilai. 1. Gunakan document.getelementbyid menjadi cara yang paling langsung. Selepas menambah ID ke input, anda boleh mendapatkan elemen dan membaca nilai melalui kaedah ini; 2. Gunakan QuerySelector untuk menjadi lebih fleksibel, dan anda boleh memilih elemen berdasarkan atribut seperti nama, kelas, jenis, dan lain -lain; 3. Anda boleh menambah input atau menukar pendengar acara untuk mencapai fungsi interaktif, seperti mendapatkan kandungan input dalam masa nyata; 4. Perhatikan masa pelaksanaan skrip, kesilapan ejaan dan penghakiman null, dan pastikan unsur itu wujud sebelum mengakses nilai.

Bagaimana untuk mendapatkan nilai butang radio yang dipilih dengan JS? Jul 18, 2025 am 04:17 AM

Terdapat dua kaedah teras untuk mendapatkan nilai butang radio yang dipilih. 1. Gunakan QuerySelector untuk mendapatkan item yang dipilih secara langsung, dan gunakan input [NAME = "NAMA-NAMA ANDA"]: Pemilih yang diperiksa untuk mendapatkan elemen yang dipilih dan membaca atribut nilainya. Ia sesuai untuk pelayar moden dan mempunyai kod ringkas; 2. Gunakan Document.GetElementsByName untuk melintasi dan mencari radio yang diperiksa pertama melalui nodelist gelung dan mendapatkan nilainya, yang sesuai untuk senario yang serasi dengan pelayar lama atau memerlukan kawalan manual proses; Di samping itu, anda perlu memberi perhatian kepada ejaan atribut nama, mengendalikan situasi yang tidak dipilih, dan pemuatan kandungan dinamik

Membina iframes kotak pasir yang selamat dengan JavaScript Jul 16, 2025 am 02:33 AM

Untuk menggunakan JavaScript untuk membuat iframe kotak pasir yang selamat, mula-mula gunakan atribut kotak pasir HTML untuk mengehadkan tingkah laku iframe, seperti melarang pelaksanaan skrip, tingkap pop timbul dan penyerahan bentuk; kedua, dengan menambah token tertentu seperti skrip membenarkan untuk melegakan keizinan seperti yang diperlukan; kemudian menggabungkan postmessage () untuk mencapai komunikasi silang domain yang selamat, sambil mengesahkan sumber mesej dan data yang ketat; Akhirnya elakkan kesilapan konfigurasi biasa, seperti tidak mengesahkan sumber, tidak menubuhkan CSP, dan lain -lain, dan melakukan ujian keselamatan sebelum pergi dalam talian.

Liter Templat JavaScript: Kes sintaks dan Gunakan Jul 13, 2025 am 02:28 AM

Rentetan templat adalah ciri yang diperkenalkan dalam JavaScriptes6, yang membungkus kandungan dengan backticks dan menyokong interpolasi berubah-ubah dan rentetan berbilang baris. 1. Gunakan backticks untuk menentukan rentetan seperti thisisatemplateliteral; 2. Masukkan pembolehubah atau ekspresi melalui sintaks $ {} seperti IAM $ {AGE} tahun; 3. Secara semulajadi menyokong teks berbilang baris tanpa menambahkan garis baru secara manual. Senario biasa termasuk kandungan HTML yang menjana secara dinamik, output rentetan berbilang baris, dan jahitan logik bersyarat yang dipermudahkan. Nota termasuk mengelakkan serangan suntikan, penggunaan templat tag lanjutan, dan menjaga logik mudah.

See all articles