Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

React useContext hooki

ULASHISH

React konteksti

React Context - global miqyosda stateni boshqarish usuli.

U useState Hook bilan birgalikda chuqur joylashtirilgan componentlar o‘rtasida holatni faqat useState bilan bo‘lgandan ko‘ra osonroq almashish uchun ishlatilishi mumkin.

Muammo

Holatga kirishni talab qiluvchi stekdagi eng yuqori ota-component tomonidan ushlab turilishi kerak.

Tasavvur qilish uchun bizda ko‘plab ichki qismlar mavjud. Stackning yuqori va pastki qismidagi component holatga kirishi kerak.

Buni Kontekstsiz amalga oshirish uchun biz har bir ichki o‘rnatilgan component orqali holatni "prop" sifatida o‘tkazishimiz kerak bo‘ladi. Bu "prop burg‘ulash" deb ataladi.

Misol:

Ichki componentlar orqali "propslarni" o‘tkazish:

import { useState } from 'react';
import { createRoot } from 'react-dom/client';

function Component1() {
  const [user, setUser] = useState("Linus");

  return (
    <>
      <h1>{`Hello ${user}!`}</h1>
      <Component2 user={user} />
    </>
  );
}

function Component2({ user }) {
  return (
    <>
      <h1>Component 2</h1>
      <Component3 user={user} />
    </>
  );
}

function Component3({ user }) {
  return (
    <>
      <h1>Component 3</h1>
      <h2>{`Hello ${user} again!`}</h2>
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <Component1 />
);

Misolni ishga tushirish »

2-component statega muhtoj bo‘lmasa ham, u 3-componentga yetib borishi uchun stateni o‘tkazishi kerak edi.

Yechim

Yechim kontekst yaratishdir.

Kontekst yaratish

Kontekst yaratish uchun createContext ni import qilishingiz va uni ishga tushirishingiz kerak:

import { useState, createContext, useContext } from 'react';
import { createRoot } from 'react-dom/client';

const UserContext = createContext();

Keyinchalik, Kontekst holatiga muhtoj bo‘lgan componentlar daraxtini o‘rash uchun Kontekst Provayderidan foydalanamiz.

Kontekst provayderi

Kontekst provayderiga bola componentlarini o‘rab oling va holat qiymatini bering.

function Component1() {
  const [user, setUser] = useState("Linus");

  return (
    <UserContext.Provider value={user}>
      <h1>{`Hello ${user}!`}</h1>
      <Component2 />
    </UserContext.Provider>
  );
}

Endi ushbu daraxtdagi barcha componentlar foydalanuvchi kontekstiga kirish huquqiga ega bo‘ladi.

useContext Hook’idan foydalaning

Kontekstni bolalar componentida ishlatish uchun biz useContext Hook yordamida unga kirishimiz kerak.

Birinchidan, import operatorida useContext ni qo‘shing:

import { useState, createContext, useContext } from "react";

Keyin barcha componentlarda foydalanuvchi kontekstiga kirishingiz mumkin:

function Component3() {
  const user = useContext(UserContext);

  return (
    <>
      <h1>Component 3</h1>
      <h2>{`Hello ${user} again!`}</h2>
    </>
  );
}

To‘liq misol

Misol:

React Context-dan foydalangan holda to‘liq misol:

import { useState, createContext, useContext } from 'react';
import { createRoot } from 'react-dom/client';

const UserContext = createContext();

function Component1() {
  const [user, setUser] = useState("Linus");

  return (
    <UserContext.Provider value={user}>
      <h1>{`Hello ${user}!`}</h1>
      <Component2 />
    </UserContext.Provider>
  );
}

function Component2() {
  return (
    <>
      <h1>Component 2</h1>
      <Component3 />
    </>
  );
}

function Component3() {
  const user = useContext(UserContext);

  return (
    <>
      <h1>Component 3</h1>
      <h2>{`Hello ${user} again!`}</h2>
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <Component1 />
);

Misolni ishga tushirish »

‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish