კონტექსტის ჰუკი useContext React-ში

ამ გაკვეთილზე ჩვენ გავაგრძელებთ მუშაობას კონტექსტთან. ახლა ავაშენებთ კომპონენტების ხეს. დასაწყისისთვის ცალკე ფაილში შევქმნით React კომპონენტს BigBox:

BigBox.jsxfunction BigBox() {
  return (
    <p>bigbox</p>
  );
}

იმპორტირებთ მას და განათავსებთ ჩვენს მთავარ კომპონენტში App:

App.jsximport BigBox from './BigBox';

function App() {
  return (
    <BigBox />
  );
}

უფრო ნათელობისთვის ოდნავ დავსტილიზებთ დივებს. ამისთვის შევქმნათ ფაილი styles.css:

styles.cssdiv {
  border: 1px solid blue;
  margin: 10px;
  text-align: center;
  max-width: 300px;
}

არ დაგვავიწყდეს მისი იმპორტირება App.js-ში:

App.jsximport './styles.css';

ახლა ცალკე ფაილში შევქმნათ კომპონენტი MiddleBox:

MiddleBox.jsxfunction MiddleBox() {
  return (
    <p>middlebox</p>
  );
}

და ჩავდოთ ის დიდ ყუთში BigBox:

BigBox.jsximport MiddleBox from './MiddleBox';

function BigBox() {
  return (
    <div>
      <MiddleBox />
    </div>
  );
}

გავაკეთოთ იგივე პატარა ყუთში SmallBox:

SmallBox.jsxfunction SmallBox() {
  return (
    <p>I am ... </p>
  );
}

განვათავსოთ ორი ასეთი ყუთი MiddleBox-ში:

MiddleBox.jsximport SmallBox from './SmallBox';

function MiddleBox() {
  return (
    <div>
      <SmallBox />
      <SmallBox />
    </div>
  );
}

ხე ავაშენეთ. ახლა კი ჩვენ გვსურს, რომ ჩვენი App-დან გადავცეთ, ვთქვათ, SmallBox-ში სტრიქონული მნიშვნელობა 'small box :)', პროფსების გამოყენების გარეშე, კონტექსტის გამოყენებით (რა იქნა, თუ ჩვენი ყუთების აპლიკაცია უზარმაზარ ზომებამდე გაიზრდება).

კონტექსტის ფაილი MyContext.js ჩვენ უკვე შევქმენით და დავაკავშირეთ წინა გაკვეთილზე.

შემდეგი ნაბიჯი, რომელსაც გავაკეთებთ - შევახვევთ BigBox-ს კონტექსტის პროვაიდერში, რომელიც ჩვენი კონტექსტის ობიექტის თვისებაა MyContext. ახლა ყველა კომპონენტს, რომელიც ამ კონსტრუქციაშია ჩასმული (და ეს არის ყველა ყუთი, რომელიც ჩასმულია BigBox-ში) ექნება წვდომა და შეძლებს გამოიწეროს კონტექსტის ცვლილებები. კონტექსტის მნიშვნელობად ჩვენ ვაწვდით სასურველ 'small box :)'-ს:

App.jsxfunction App() {
  return (
    <MyContext.Provider value="small box :)">
      <BigBox />
    </MyContext.Provider>
  );
}

ახლა კი დარჩა კონტექსტის მნიშვნელობის წაკითხვა. ჩვენ გვსურს მისი გამოყენება SmallBox-ში, რაც ნიშნავს, რომ უნდა იმპორტირებულ იქნას კონტექსტის ფაილი MyContext.js და ჰუკი useContext:

SmallBox.jsximport { useContext } from 'react';
import { MyContext } from './MyContext.js';

useContext-ის გამოყენებით წავიკითხოთ კონტექსტის მნიშვნელობა ცვლადში name:

SmallBox.jsxfunction SmallBox() {
  const name = useContext(MyContext);
  
  return (
    <div>
      <p>I am ... </p>
    </div>
  );
}

ჩვენ გამოვწერეთ SmallBox ამ კონტექსტზე და, თუ ის შეიცვლება, ეს კომპონენტი ასევე განახლდება.

და, ბოლოს, ჩავსვათ ცვლადის მნიშვნელობა name მრავალწერტილის ნაცვლად:

SmallBox.jsxfunction SmallBox() {
  const name = useContext(MyContext);
  
  return (
    <div>
      <p>I am {name} </p>
    </div>
  );
}