#javascript #reactjs
#javascript #reactjs
Вопрос:
import React, { useContext } from "react";
import { ContextProvider, MyContext } from "./Context/MyContext";
import "./styles.css";
export default function App() {
const value = useContext(MyContext);
console.log(value);
return (
<ContextProvider>
<div className="App">{value}</div>
</ContextProvider>
);
}
Если я хочу использовать useContext точно в компоненте приложения. Я получаю значение как неопределенное для компонента приложения, но значение всех остальных компонентов в порядке. Итак, я хочу знать, каков механизм, стоящий за этим. Почему я не могу получить доступ к useContext в компоненте приложения.
Комментарии:
1. Вам нужно получить доступ к контексту во вложенном компоненте. Что-то, что является дочерним элементом поставщика. Здесь вы делаете это внутри
App
, который является прямым родителем поставщика. Вам нужно будет обернутьApp
ContextProvider
в, чтобы получить доступ к контексту внутри него
Ответ №1:
ContextProvider предоставляет значения в вашем контексте всем своим дочерним компонентам. Значение, которое вы предоставляете своему <div>, поступает из родительского компонента ContextProvider в вашем случае, то есть из приложения. На данный момент ваш провайдер все еще не настроен, вам нужно обернуть приложение внутри провайдера, чтобы получить доступ к значениям контекста. Другими словами, поставщик должен быть родительским приложением, чтобы предоставлять ему значения, а не наоборот