Az Önhöz hasonló olvasók támogatják a MUO-t. Amikor a webhelyünkön található linkek használatával vásárol, társult jutalékot kaphatunk. Olvass tovább.

A React.js egy népszerű és hatékony JavaScript-könyvtár felhasználói felületek létrehozására. Használhatja dinamikus, interaktív és reszponzív webalkalmazások készítésére.

A React.js-ben használt egyik gyakori összetevő a körhinta. Könnyen elvégezhető, akár a beépített React-funkciókkal, akár egy harmadik féltől származó könyvtár használatával.

Mi az a körhinta és mi a haszna?

A körhinta egy diavetítés-összetevő, amely lehetővé teszi a képek vagy videók közötti böngészést. Leggyakrabban a webhelyeken használják termékek vagy szolgáltatások bemutatására, illetve kiemelt tartalmak bemutatására. A körhinta használatának számos előnye van, például:

  • Ez egy hatékony módja annak, hogy felhívja a figyelmet a fontos tartalmakra.
  • Ez egy nagyszerű módja több kép és videó bemutatásának.
  • Segít megőrizni az oldalt rendszerezetten és látványosan.
  • Használhatja interaktív felhasználói élmény létrehozására.

Karusszel létrehozása a React.js-ben

A körhinta létrehozása a React.js-ben viszonylag egyszerű, és két népszerű könyvtár is használható. A beépített React funkciókat is használhatja körhinta hozzáadásához.

A beépített funkciók használata

A körhinta létrehozásának első módja a React.js-ben a beépített funkciók használata. A React hatékony módszert kínál a körhinta létrehozására alkatrészek felhasználásával. tudsz használjon React horgokat körhinta hozzáadásához és vezérléséhez.

import React, { useState } tól től 'reagál';

const körhinta = () => {
const [index, setIndex] = useState(0);
const hossza = 3;

const handPrevious = () => {
const newIndex = index - 1;
setIndex (newIndex < 0? hossz - 1: újIndex);
};

const handleNext = () => {
const newIndex = index + 1;
setIndex (newIndex >= hossz? 0: újIndex);
};

Visszatérés (
<div className="körhinta">
<gomb onClick={handlePrevious}>Előző</button>
<gomb onClick={handleNext}>Következő</button>
<p>{index}</p>
</div>
);
};

exportalapértelmezett Körhinta;

Ez a kód a useState hook segítségével hoz létre egy index nevű állapotváltozót. Ez nyomon követi az aktuális pozíciót a körhintaban.

A handlePrevious és a handleNext funkciók gondoskodnak az indexérték frissítéséről, amikor a felhasználó rákattint a Előző és Következő gombokat.

Végül a jelölés megjeleníti az indexértéket egy bekezdéscímkében. Ha szeretné, szöveg helyett képeket vagy videókat jeleníthet meg. A körhinta stílusozható normál CSS, ill olyan CSS-keretrendszer használatával, mint a Tailwind CSS.

Mindenféle divatos stílus nélkül látnia kell egy alapvető gombpárt és egy számot, amely az aktuális indexet képviseli:

A pure-react-carousel Library használata

A React.js programban a körhinta létrehozásának második módja a tiszta reakciókörű programkönyvtár. Ez a könyvtár hatékony módot kínál a körhinta létrehozására komponensek felhasználásával. A könyvtár használatához először telepítenie kell a következő paranccsal:

npm telepítés tiszta-reagál-körhinta

Miután telepítette a könyvtárat, az összetevő segítségével körhintat hozhat létre. Íme egy példa a Carousel komponens használatára:

import Reagál tól től 'reagál';
import { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext } tól től „tiszta reakciókörhinta”;
import 'pure-react-carousel/dist/react-carousel.es.css';

const körhinta = () => {
Visszatérés (
<CarouselProvider
naturalSlideWidth={100}
naturalSlideHeight={120}
totalSlides={3}
>
<Csúszka>
<Diaindex={0}>1. dia</Slide>
<Diaindex={1}>2. dia</Slide>
<Diaindex={2}>3. dia</Slide>
</Slider>
<ButtonBack>Vissza</ButtonBack>
<ButtonNext>Következő</ButtonNext>
</CarouselProvider>
);
};

exportalapértelmezett Körhinta;

Ebben a kódban láthatja, hogy a CarouselProvider összetevő határozza meg a körhinta általános beállításait, például a naturalSlideWidth, naturalSlideHeight és totalSlides.

A Slider komponens több Slide példányt tartalmaz. A Dia komponens minden egyes diát meghatároz.

Végül a ButtonBack és a ButtonNext összetevők kezelik a körhinta navigációt.

A pure-react-carousel könyvtár használatának számos előnye van, például:

  • Könnyen kezelhető: Míg a beépített metódus több kódot igényel egy körhinta létrehozásához, a könyvtár egyszerűbb módot kínál a körhinta létrehozására a React.js-ben.
  • Fogékony: A könyvtár lehetőséget biztosít reszponzív körhinta létrehozására. A beépített módszerrel külön körhintat kellene létrehozni a különböző képernyőméretekhez.
  • Testreszabás: A könyvtár számos olyan funkciót kínál, amelyek segítségével személyre szabhatja a körhinta, mint például az automatikus lejátszás, a navigációs nyilak, az oldalszámozás stb.

A reagáló-reszponzív-körhinta könyvtár használata

A körhinta létrehozásának utolsó módja a React.js-ben a react-responsive-carousel könyvtár. Ezzel a könyvtárral komponensek felhasználásával körhintat hozhat létre. A könyvtár használatához először telepítenie kell a következő paranccsal:

npm telepítés reagál-reagáló-körhinta

Miután telepítette a könyvtárat, az összetevő segítségével körhintat hozhat létre. Íme egy példa a Carousel komponens használatára:

import Reagál tól től 'reagál';
import { körhinta } tól től „reagáló-reagáló körhinta”;
import 'react-responsive-carousel/lib/styles/carousel.min.css';

const CarouselPage = () => {
Visszatérés (
<Körhinta>
<div>
<img src="https://placehold.co/100x100" />
<p osztálynév="legenda">Jelmagyarázat 1</p>
</div>
<div>
<img src="https://placehold.co/200x200" />
<p osztálynév="legenda">Legenda 2</p>
</div>
<div>
<img src="https://placehold.co/300x300" />
<p osztálynév="legenda">Legenda 3</p>
</div>
</Carousel>
);
};

exportalapértelmezett CarouselPage;

Ebben a kódban láthatja, hogy a Carousel összetevő határozza meg a körhinta. A Carousel komponensen belül egy div tartalmazza az egyes diákat. Minden dia tartalmazhat egy képet, valamint a képhez tartozó jelmagyarázatot. A könyvtár számos lehetőséget és beállítást is kínál, amelyek segítségével személyre szabhatja a körhinta.

A reagáló-reszponzív körhintakönyvtár használatának számos előnye van, például:

  • Az egyik legnépszerűbb könyvtár: A könyvtár az egyik legnépszerűbb könyvtár a körhinta létrehozásához a React.js-ben. Így ha elakad, könnyen találhat segítséget a közösségtől.
  • Könnyen kezelhető: Csak néhány sornyi kóddal könnyen létrehozhat körhinta.
  • Fogékony: A könyvtár lehetőséget biztosít reszponzív körhinta létrehozására.
  • Testreszabás: A könyvtár számos olyan funkciót is kínál, amelyek segítségével személyre szabhatja és stílusossá teheti a körhintákat.

Javítsa a felhasználói élményt a körhinta segítségével

A körhinta segítségével több információt nyújthat a felhasználóknak, és megkönnyítheti a webhelyével való interakciót. A körhinta abban is segít, hogy az oldal rendezett és látványos legyen. Ennek eredményeként ez egy nagyszerű módja a felhasználói élmény javításának.

Ezenkívül nyomon követheti a felhasználói interakciókat a körhintakkal, és felhasználhatja az adatokat a felhasználói élmény optimalizálására. Ez segít abban, hogy jobb felhasználói élményt teremtsen webhelyén. Ezt követően ingyenesen telepítheti React alkalmazását olyan platformokon, mint a Github oldalak, ami egyszerű és költséghatékony.