react 的 createContext 和useContext

创建一个上下文对象

// my-context.js
import { createContext } from 'react';

export default createContext(null);

注入到 根组件中，并传入值 value

// app.tsx
import { useState } from 'react';
import SimpleDemo from './pages/simple-demo';
import MyContext from './my-context';

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <MyContext.Provider value={{count, setCount}}>
      <div>
        <SimpleDemo />
      </div>
    </MyContext.Provider>
  );
};
export default App;

子组件就可以使用了

import { useContext } from 'react';
import MyContext from '../../my-context';

function TestComponent() {
  const content = useContext(MyContext);
  return (
    <div>
      <p>{content.count}</p>
      <button onClick={()=>{content.setCount(2)}}>测试</button>
    </div>
  );
}
export default TestComponent;