React Context中的useContext解析及使用

Posted 清颖~

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React Context中的useContext解析及使用相关的知识,希望对你有一定的参考价值。

上一篇:React Context上下文——初识

useContext

简单概括:useContext是读取context的值,以及订阅其变化的。
用法:

const MyContext = React.createContext();
const value = useContext(MyContext);

解释:
接收一个 context 对象(React.createContext 的返回值)并返回该 context 的当前值。
当前的 context 值由上层组件中距离当前组件最近的 Provider 的 props值决定。

const themes = 
  light: 
    foreground: "#000000",
    background: "#eeeeee"
  ,
  dark: 
    foreground: "#ffffff",
    background: "#222222"
  
;

const ThemeContext = React.createContext(themes.light);

// 第一层组件
function App() 
  return (
    <ThemeContext.Provider value=themes.dark>
      <Toolbar />
    </ThemeContext.Provider>
  );


// 第二层组件
function Toolbar(props) 
  return (
    <div>
      <ThemedButton />
    </div>
  );

// 第三层,useContext的使用点,重要!!! 
function ThemedButton() 
  // 这里直接使用useContext,拿到ThemeContext 的props值
  const theme = useContext(ThemeContext);
  return (
    <button style= background: theme.background, color: theme.foreground >
      I am styled by theme context!
    </button>
  );

参考:https://zh-hans.reactjs.org/docs/hooks-reference.html#usecontext

以上是关于React Context中的useContext解析及使用的主要内容,如果未能解决你的问题,请参考以下文章

React Context 和 useContext

react中 useContext 和useReducer的使用

React 系列 02❤️ Custom Hooks 中使用 React Context

React 系列 02❤️ Custom Hooks 中使用 React Context

React.useContext() 不断返回未定义?

从 TypeScript 中的 useContext 解构值时出错