useContent 用来简化代码
在 https://ant.design/components/button-cn 打开一个codeSanbox, 替换下面的代码保存
// import React from "react";
import React, { useContext, useState } from "react";
// 创建一个名为 MyContext 的 Context
const MyContext = React.createContext();
// 父组件
function ParentComponent() {
const [data, setData] = useState(1);
return (
<>
father:
<button
onClick={() => {
setData(data + 1);
}}
>
修改数据+1
</button>
<MyContext.Provider value={data}>
<ChildComponent />
</MyContext.Provider>
</>
);
}
// 子组件
function ChildComponent() {
const contextData = useContext(MyContext); // 从 Context 中获取数据
return <div>child:{contextData}</div>;
}
const App = () => (
<div>
<ParentComponent />
</div>
);
export default App;