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

  • 相关阅读:
    字符串初始化、查找字符+获取字符
    冒泡排序
    JAVA中值类型和引用类型的不同?
    二维数组初始化,属性,遍历,输出各元素总和。
    数组定义属性遍历循环,输出最大数
    for穷举,叠代练习
    HTML--Boby部分之<a>标签
    HTML--Boby内标签之多行文本及下拉框
    HTML--Boby部分Input之重置
    HTML--Boby部分Input之上传文件
  • 原文地址:https://www.cnblogs.com/ranyonsue/p/13852178.html
Copyright © 2020-2023  润新知