显示<ContextConsumer> [函数] </ContextConsumer>的console.log(Wrapper.debug())

import React, { createContext, useContext } from 'react';

// 创建一个 Context
const MyContext = createContext();

// 提供者组件
function MyProvider({ children }) {
  const value = { /* ... */ };
  return <MyContext.Provider value={value}>{children}</MyContext.Provider>;
}

// 消费者组件
function MyComponent() {
  const contextValue = useContext(MyContext);
  console.log(contextValue); // 这里会打印出 context 的值
  return <div>{/* 使用 contextValue */}</div>;
}

// 在应用中使用 Provider 包裹组件树
function App() {
  return (
    <MyProvider>
      <MyComponent />
    </MyProvider>
  );
}

import React, { createContext, useContext, useEffect } from 'react';

const MyContext = createContext();

function MyProvider({ children }) {
  const [value, setValue] = React.useState({});
  return <MyContext.Provider value={value}>{children}</MyContext.Provider>;
}

function MyComponent() {
  const contextValue = useContext(MyContext);
  
  useEffect(() => {
    console.log(contextValue); // 这里会在 context 值变化时打印
  }, [contextValue]);

  return <div>{/* 使用 contextValue */}</div>;
}

function App() {
  return (
    <MyProvider>
      <MyComponent />
    </MyProvider>
  );
}