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>මම ... </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>
  );
}