Ҳук контексти 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>Ман ... ҳастам</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>Ман ... ҳастам</p>
    </div>
  );
}

Мо SmallBox-ро ба ин контекст обуна кардем ва, агар он тағйир ёбад, ин компонент низ нав карда мешавад.

Ва, ниҳоят, арзиши тағйирёбандаи name-ро ба ҷои нуқтаҳо мегузорем:

SmallBox.jsxfunction SmallBox() {
  const name = useContext(MyContext);
  
  return (
    <div>
      <p>Ман {name} ҳастам</p>
    </div>
  );
}