Cập nhật Ngữ cảnh trong React

Trong bài học này, chúng ta sẽ xem xét việc cập nhật các thành phần khi giá trị ngữ cảnh thay đổi. Giả sử bạn muốn ngữ cảnh có thể thay đổi.

Trong trường hợp này, hữu ích khi áp dụng ngữ cảnh kết hợp với trạng thái. Hãy thay đổi một chút ứng dụng hộp của chúng ta, mà chúng ta đã làm ở bài học trước và làm sao để khi nhấn vào nút giá trị được truyền sẽ trở thành 'metal box :)'.

Vậy, hãy lấy tệp App của chúng ta và sau BigBox, vẽ một nút nhỏ:

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

Tiếp theo, nhập khẩu hook useState và tạo ra trạng thái name, giá trị của nó sẽ thay đổi khi nhấn nút. Hãy đặt giá trị ban đầu là giá trị mà chúng ta đã truyền ngay lập tức làm giá trị ngữ cảnh, tức là 'small box :)':

function App() {
	const [name, setName] = useState('small box :)');
}

Lần này, ngữ cảnh chúng ta sẽ truyền không phải là chuỗi, mà là trạng thái name:

<MyContext.Provider value={name}>
	<BigBox />
	<button>click</button>
</MyContext.Provider>

Bước cuối cùng, chúng ta sẽ gọi trình xử lý sự kiện nhấp chuột vào nút và sử dụng hàm setName để thiết lập giá trị mới của trạng thái thành 'metal box :)'. Sau đó, có thể nhấn vào nút và kiểm tra kết quả:

<button onClick={() => {
	setName('metal box :)');
}}>click</button>

Sử dụng ứng dụng được tạo bởi bạn để giải các bài tập ở bài học trước. Tạo ra trạng thái age, mà bạn sẽ thay vì truyền số, hãy truyền bằng ngữ cảnh từ App, đặt giá trị ban đầu là 50. Thêm vào dưới thành phần Parent trong App một nút, với mỗi lần nhấp vào đó, giá trị trạng thái age sẽ giảm đi 2.