• 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可以实现啊,为啥要用这个,这个的话其实是你的子组件写到别的文件里也还是可以公用这个状态的,也就是这个状态对子组件的子组件的子组件也可以公用。

  • 相关阅读:
    java8大排序
    如何删除oracle 的用户及其数据
    JavaScript开发者常忽略或误用的七个基础知识点
    Vim学习指南
    5个开发人员不应该错过的最好跨平台PHP编辑器
    OpenGL 简介
    web 页面内容优化管理与性能技巧
    创建高性能移动 web 站点
    近期十大优秀jQuery插件推荐
    30本世界名著浓缩成的经典话语
  • 原文地址:https://www.cnblogs.com/ranyonsue/p/13852178.html
Copyright © 2020-2023  润新知