Kait Konteks useContext dalam React

Dalam pelajaran ini, kita akan terus bekerja dengan konteks. Sekarang kita akan membina pokok komponen. Untuk permulaan, dalam fail berasingan buat komponen React BigBox:

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

Importnya dan letakkan dalam komponen utama kami App:

App.jsximport BigBox from './BigBox';

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

Untuk lebih kejelasan, mari kita gayakan div sedikit. Untuk ini, buat fail styles.css:

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

Jangan lupa untuk mengimportnya ke dalam App.js:

App.jsximport './styles.css';

Sekarang dalam fail berasingan buat komponen MiddleBox:

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

Dan letakkannya dalam kotak besar BigBox:

BigBox.jsximport MiddleBox from './MiddleBox';

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

Mari lakukan perkara yang sama dengan kotak kecil SmallBox:

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

Letakkan dua kotak sedemikian dalam MiddleBox:

MiddleBox.jsximport SmallBox from './SmallBox';

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

Kami telah membina pokok. Dan sekarang kami mahu menghantar dari App kami, katakan, ke SmallBox nilai rentetan 'small box :)', tanpa menggunakan props, tetapi menggunakan konteks (sekiranya aplikasi kotak kami berkembang menjadi saiz yang sangat besar).

Fail dengan konteks MyContext.js kami telah buat dan sambungkan dalam pelajaran lepas.

Langkah seterusnya yang akan kami lakukan - bungkus BigBox dalam penyedia konteks, yang merupakan sifat objek konteks kami MyContext. Sekarang semua komponen yang disertakan dalam pembinaan ini (dan ini semua kotak yang disertakan dalam BigBox) akan dapat mengakses dan melanggan perubahan konteks. Sebagai nilai konteks, kami menghantar yang dikehendaki 'small box :)':

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

Dan sekarang tinggal membaca nilai konteks. Kami mahu menggunakannya dalam SmallBox, jadi import fail konteks MyContext.js ke sana dan kait useContext:

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

Baca dengan useContext nilai konteks ke dalam pembolehubah name:

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

Kami telah melanggan SmallBox kepada konteks ini dan, jika ia berubah, komponen ini juga akan dikemas kini.

Dan akhirnya, gantikan nilai pembolehubah name sebagai ganti elipsis:

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