context API_React

4767 ワード

Context API

プロジェクトで管理可能なグローバル使用可能な値

この値は、必ずしも状態を示す必要はありません.

この値は、関数であってもよいし、外部ライブラリインスタンスであってもよいし、DOMであってもよい.
Context作成時のReact.createContext()という名前の関数の使用const UserDispatch = React.createContext(null);createContextのパラメータはContextのデフォルト値を設定できます.
ここで設定する値は、Contextへの書き込み時に値を指定しない場合に使用するデフォルト値です.
Contextの作成後、ContextにはContextに値を指定できるProviderというコンポーネントが含まれます.この構成部品を使用する場合、valueという値を設定できます.<UserDispatch.Provider value={dispatch}>...</UserDispatch.Provider>このように設定すると、Providerに囲まれた任意のコンポーネントでContextの値を直接他の場所からクエリーして使用することができます.
エクスポート

export const UserDispatch = React.createContext(null);

マウント

import { UserDispatch } from './App';

export const UserDispatch = React.createContext(null);

function App() {
  return (
    <UserDispatch.Provider value={dispatch}>
    </UserDispatch.Provider>
  );
}
//userList.js
import React, { useContext } from 'react';
import { UserDispatch } from './App';

const UserList = ({ users }) => {
  const dispatch = useContext(UserDispatch);

  return (
    <button
        onClick={() => {
        dispatch({ type: 'TOGGLE_USER', id: users.id });
        }}
    >
      {users.username}
     </button>
  )
}

Reference

この問題について(context API_React), 我々は、より多くの情報をここで見つけました https://velog.io/@suminllll/context-APIReact

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

エピック反応:フック.USENT , USE効果私は何を学んでいる..

自然数配列の反転