Реагировать на контекст

Контекст React очень полезен, когда вы создаете интерфейсное приложение с помощью react. Сначала я рассказываю, почему нам нужно реагировать на контекст.

Предположим, у нас есть указанное выше приложение для реагирования. Массив, содержащий сведения о пользователе, находится в файле DesplayUser.js и отображает все сведения о пользователе. Добавьте новые данные пользователя и отредактируйте дескриптор данных текущего пользователя с помощью EditUser.js и AddUser.js. Файлы EditUser.js и AddUser.js должны иметь доступ к данным пользователя. Как мы это делаем? мы можем импортировать EditUser.js и AddUser.js в despalyUser.js и передавать данные пользователя с помощью props. Но я не хочу отображать компонент EditUser и компонент AddUser в компоненте displayUser, это не имеет никакого смысла. Еще мы можем взять массив сведений о пользователе из компонента DespalyUser и перейти к родительскому компоненту, которым является app.js. теперь все три компонента могут получить доступ к сведениям о пользователях с помощью реквизита, но данные пользователя не относятся к компоненту приложения. Итак, мы можем использовать контекст реакции для этой ситуации. Здесь происходит следующее: мы создаем компонент контекста и сохраняем в нем сведения о пользователе и передаем все данные о пользователе в любой компонент, который нам нужен, через контекст.

import React ,{createContext} from 'react'
export const userContext = createContext();
export const UserProvider  = (props) => {
    const User = [
  {
    name:'perera',
    age: 20,
    email:'[email protected]'
  },
  {
    name:'randy',
    age:25,
    email:'[email protected]'
  }
];
    return (
        <userContext.Provider  value={User} >
            {props.children}
        </userContext.Provider>
    )
}

Для этого нам нужно создать файл с именем contextuserdetails.js. нам нужно импортировать createContext, потому что нам нужно создать контекст. Мы создаем контекст с именем userContext и экспортируем его. Затем мы вырезаем сведения о пользователе из Desplayuser.js и переходим в contextuserdetails.js. мы создаем компонент под названием UserPrivider в этом файле и здесь данные о прошлых пользователях. Внутри возврата мы визуализируем этот userContext и передаем userDetails. Prpos.children отображает все дочерние компоненты, перемещенные между пользовательским контекстом. Здесь не использовался экспорт по умолчанию, потому что userComtext также экспортирует.

import AddUser from "./AddUser.js"
import EditUser from "./EditUser.js"
import DisplayUser from "./DisplayUser.js"
import {UserProvider } from "./UserDetailsContext.js"
function App() {
  return (
    <UserProvider>
      <div>
        <AddUser/>
        <EditUser/>
        <DisplayUser/>     
      </div>  
    </UserProvider>
  );
}
export default App;

Для доступа к сведениям о пользователе нам понадобится компонент. Затем импортируйте UserPrivider в app.js и оберните компонент, который должен получить доступ к данным пользователя. Тогда как получить доступ к этим деталям. Чтобы получить доступ к этим сведениям о пользователе, нам нужно импортировать userContext и useContext. Внутри компонента получите информацию о пользователе с помощью const. Теперь мы можем использовать это постоянное отображение или изменять данные пользователя.

import React,{useContext} from 'react';
import {userContext} from "./Products.js"
function DisplayUser(){
const value  = useContext(userContext);
    return(
        <div>
            {value.map(user =>(
                <h4>{user.name}</h4>
                <h4>{user.age}</h4>
                <h4>{user.email}</h4>
            ))}            
        </div>
    )
}
export default DisplayUser;

Итак, я думаю, вы получили представление о том, как использовать контекст в проектах React. Контекст очень полезен, когда мы создаем очень большой проект.