Hook ngữ cảnh useContext trong React

Trong bài học này, chúng ta sẽ tiếp tục làm việc với ngữ cảnh. Bây giờ hãy xây dựng một cây component. Đầu tiên, trong một tệp riêng biệt, hãy tạo component React BigBox:

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

Hãy import nó và đặt nó trong component chính App của chúng ta:

import BigBox from './BigBox';

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

Để rõ ràng hơn, chúng ta sẽ thêm một chút phong cách cho các thẻ div. Để làm điều này, hãy tạo tệp styles.css:

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

Đừng quên import nó vào App.js:

import './styles.css';

Bây giờ, trong một tệp riêng biệt, hãy tạo component MiddleBox:

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

Và đặt nó vào hộp lớn BigBox:

import MiddleBox from './MiddleBox';

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

Hãy làm tương tự với hộp nhỏ SmallBox:

function SmallBox() {
	return (
		<p>Tôi là ... </p>
	);
}

Hãy đặt hai hộp như vậy vào MiddleBox:

import SmallBox from './SmallBox';

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

Chúng ta đã xây dựng xong cây. Và bây giờ chúng ta muốn truyền từ App của chúng ta, giả sử, vào SmallBox một giá trị chuỗi 'small box :)', mà không sử dụng props, mà sử dụng ngữ cảnh (biết đâu ứng dụng hộp của chúng ta sẽ phát triển đến quy mô khổng lồ).

Chúng ta đã tạo và kết nối tệp ngữ cảnh MyContext.js trong bài học trước.

Bước tiếp theo chúng ta sẽ làm - bọc BigBox trong provider ngữ cảnh, là một thuộc tính của đối tượng ngữ cảnh MyContext của chúng ta. Bây giờ tất cả các component được đặt trong cấu trúc này (và đây là tất cả các hộp, lồng trong BigBox) sẽ có thể truy cập và theo dõi các thay đổi của ngữ cảnh. Chúng ta truyền giá trị ngữ cảnh mong muốn 'small box :)':

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

Và bây giờ chỉ cần đọc giá trị ngữ cảnh. Chúng ta muốn sử dụng nó trong SmallBox, vì vậy hãy import tệp ngữ cảnh MyContext.js và hook useContext vào đó:

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

Hãy đọc bằng useContext giá trị ngữ cảnh vào biến name:

function SmallBox() {
	const name = useContext(MyContext);
	
	return (
		<div>
			<p>Tôi là ... </p>
		</div>
	);
}

Chúng ta đã đăng ký SmallBox vào ngữ cảnh này và, nếu nó thay đổi, component này cũng sẽ được cập nhật.

Và cuối cùng, thay thế giá trị của biến name vào chỗ dấu ba chấm:

function SmallBox() {
	const name = useContext(MyContext);
	
	return (
		<div>
			<p>Tôi là {name} </p>
		</div>
	);
}

Trong component rỗng App, hãy tạo component Parent, và trong đó component Daughter, và trong Daughter component Grandson. Sử dụng ngữ cảnh, truyền từ App giá trị tuổi 42, và bằng cách sử dụng useContext, hãy hiển thị nó trong component Daughter.

Và bây giờ trong component Grandson hãy hiển thị giá trị tuổi, nhưng đã chia cho 2.