zoukankan      html  css  js  c++  java
  • React Hooks中使用useContext 进行父组件向子组件传值

    1、封装的公共文件

    在组件外部建立一个Context

    // createContext.js文件

    import { createContext } from "react";

    const myContext = createContext(null);

    export default myContext;

    2、父组件

    myContext.Provider提供了一个Context对象,这个对象是可以被子组件共享的。

    import React, { useState} from "react";
    import Counter from './Counter'
    import myContext from './createContext'

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

    return (
    <div>
    <h4>我是父组件</h4>
    <p>点击了 {count} 次!</p>
    <button
    onClick={() => {
    setCount(count + 1);
    }}
    >
    点我
    </button>

    {/* 关键代码 */}
    {/* 提供器 */}
    <myContext.Provider value={count}>
    <Counter />
    </myContext.Provider>
    </div>
    );
    }
    export default App;

    3、子组件

    useContext()钩子函数用来引入Context对象,从中获取count 属性

    import React, { useContext} from 'react';
    import myContext from './createContext'

    // 关键代码
    function Counter() {
    const count = useContext(myContext); // 得到父组件传的值
    return (
    <div>
    <h4>我是子组件</h4>
    <p>这是父组件传过来的值:{count}</p>
    </div>
    )
    }

    export default Counter;

    有人可能觉得用useState可以实现啊,为啥要用这个,这个的话其实是你的子组件写到别的文件里也还是可以公用这个状态的,也就是这个状态对子组件的子组件的子组件也可以公用。

  • 相关阅读:
    面向 部分
    并发 编程
    数据库 部分
    匿名函数
    Linux 30岁,这些年经历了什么?
    漫谈 HTTP 连接
    华为交换机命令基础入门学习,小白也能看得懂!
    一文讲透APaaS平台是什么
    什么是边缘CDN和虚拟CDN (vCDN)?
    systemd进程管理工具实战教程
  • 原文地址:https://www.cnblogs.com/ranyonsue/p/13852178.html
Copyright © 2011-2022 走看看