react:useContent

发布时间:2023年12月22日

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;

文章来源:https://blog.csdn.net/qq_36413371/article/details/135147485
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。