react:useContent

最新推荐文章于 2024-05-20 22:56:09 发布

小强有个dream

最新推荐文章于 2024-05-20 22:56:09 发布

阅读量706

点赞数 5

分类专栏： react18 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/qq_36413371/article/details/135147485

版权

react18 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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;