React-ի useContext կոնտեքստի հուքը

Այս դասում մենք կշարունակենք աշխատել կոնտեքստի հետ: Այժմ կկառուցենք կոմպոնենտների ծառ: Սկսելու համար առանձին ֆայլում կստեղծենք React կոմպոնենտ BigBox:

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

Եկեք այն իմպորտ անենք և տեղադրենք մեր գլխավոր App կոմպոնենտում:

App.jsximport BigBox from './BigBox';

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

Ավելի պարզ դարձնելու համար եկեք մի փոքր ստիլիզացնենք div-երը: Դրա համար կստեղծենք 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>
  );
}