react hooks子组件向父组件传参

吉米多维奇

于 2020-10-09 18:54:51 发布

阅读量5.9k

点赞数 3

分类专栏： react hooks 文章标签： react

本文链接：https://blog.youkuaiyun.com/qq_41078029/article/details/108984125

版权

react 同时被 2 个专栏收录

7 篇文章

订阅专栏

hooks

1 篇文章

订阅专栏

本文介绍了一个使用React实现的子父组件间状态传递的简单案例。通过使用`useState`和`useContext`，展示了如何从子组件更新父组件的状态，并提供了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

子组件

import React, { useState, useContext  } from 'react';
import { ChildrenContext } from '../index';
import { Button } from 'antd';
export const Children= (props) => {
    const { setParent } = props;
    const baseval = useContext(ChildrenContext);
    const onClick= () => {
        setParent(false);
    }
    return (
        <Button type="primary" onClick={()=>onClick()}>点击</Button>
    );
}

父组件

import React, { useState, createContext } from 'react';
import {Children} from './Children.js';
export const ChildrenContext = createContext();
export const Parent = () => {
    const [parent, setChildren] = useState(false);
    return (
         <ChildrenContext.Provider value={parent}>
            <Children setParent={setChildren}/>
         </ChildrenContext.Provider>
    );
}