<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>useContext</title>
</head>
<body>
<div id="app"></div>
<!-- babel的作用是用来解析jsx语法 -->
<script src="./libs/babel.min.js"></script>
<script src="./libs/react.development.js"></script>
<script src="./libs/react-dom.development.js"></script>
<script type="text/babel">
const context = React.createContext(); // 创建一个上下文
// context.Provider 表示数据提供者, value属性表示全局数据
// 可以在所有的子节点中获取使用
const AppProvider = ({ children }) => {
const [count, setCount] = React.useState(1);
return (
<context.Provider value={{ name: "全局数据", count, setCount }}>
{children}
</context.Provider>
);
};
const Counter = () => {
const { name, count, setCount } = React.useContext(context);//使用context获取数据
return (
<button onClick={() => setCount(count + 1)}>
{name}---{count}
</button>
);
};
function App() {
const { name, count } = React.useContext(context);
return (
<>
<h1>
这是一个组件---{name}----{count}
</h1>
<Counter />
</>
);
}
const domContainer = document.querySelector("#app");
const root = ReactDOM.createRoot(domContainer); // 创建一个react组件的挂载节点
root.render(
<AppProvider>
<App />
</AppProvider>
);
</script>
</body>
</html>
277
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
