Το Hook useContext για το Context στο React

Σε αυτό το μάθημα θα συνεχίσουμε να δουλεύουμε με το context. Τώρα θα χτίσουμε ένα δέντρο components. Αρχικά, σε ένα ξεχωριστό αρχείο θα δημιουργήσουμε το React component BigBox:

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

Θα το εισάγουμε και θα το τοποθετήσουμε στο κύριο μας component 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';

Τώρα σε ένα ξεχωριστό αρχείο θα δημιουργήσουμε το component 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 :)', χωρίς να χρησιμοποιήσουμε props, αλλά χρησιμοποιώντας το context (μήπως η εφαρμογή με τα κουτιά μας μεγαλώσει σε τεράστια μεγέθη).

Το αρχείο με το context MyContext.js το έχουμε ήδη δημιουργήσει και συνδέσουμε στο προηγούμενο μάθημα.

Το επόμενο βήμα που θα κάνουμε - θα τυλίξουμε το BigBox στον προσφορέα context, ο οποίος είναι μια ιδιότητα του αντικειμένου context MyContext. Τώρα όλα τα components, που περικλείονται σε αυτήν την κατασκευή (και αυτά είναι όλα τα κουτιά, που είναι εντός του BigBox) θα μπορούν να έχουν πρόσβαση και να εγγραφούν για αλλαγές στο context. Ως τιμή του context περνάμε την επιθυμητή 'small box :)':

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

Και τώρα μένει να διαβάσουμε την τιμή του context. Θέλαμε να τη χρησιμοποιήσουμε στο SmallBox, επομένως εισάγουμε εκεί το αρχείο context MyContext.js και το hook useContext:

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

Θα διαβάσουμε με τη βοήθεια του useContext την τιμή του context στη μεταβλητή name:

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

Εγγραφήκαμε στο SmallBox σε αυτό το context και, εάν αλλάξει, αυτό το component θα ενημερωθεί επίσης.

Και, τέλος, αντικαθιστούμε την τιμή της μεταβλητής name στη θέση των αποσιωπητικών:

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