阅读 169

React 父子组件通信的几种方法(react什么意思)

在 React 中,父子组件的通信是常见的问题,除了使用状态管理工具(如redux)以外,也可以实现父子组件的相互通信。

其中,父组件可以通过props原型方法向子组件通信,子组件可以通过回调函数事件冒泡向父组件通信。

1. 父组件向子组件通信

1. props

如下代码,name作为props由父组件传递给子组件,子组件拿到name后,渲染在页面上。

参数name由父组件传递给了子组件。

import { useState } from 'react'; const Son = ({ name }) => {     return <div>{name}</div>; }; const Father = () => {     const [name, setName] = useState('Jack');     return (         <>             <Son name={name} />         </>     ); }; export default Father; 复制代码

2. 原型方法

父组件通过React.createRef()创建Ref,保存在实例属性myRef上。父组件中,渲染子组件时,定义一个Ref属性,值为刚创建的myRef

父组件调用子组件的myFunc函数,传递一个参数,子组件接收到参数,打印出参数。

参数从父组件传递给子组件,完成了父组件向子组件通信。

import React, { Component, Fragment } from 'react'; class Son extends Component {     myFunc(name) {         console.log(name);     }     render() {         return <></>;     } } // 父组件 export default class Father extends Component {     constructor(props) {         super(props);         // 创建Ref,并保存在实例属性myRef上         this.myRef = React.createRef();     }     componentDidMount() {         // 调用子组件的函数,传递一个参数         this.myRef.current.myFunc('Jack');     }     render() {         return (             <>                 <Son ref={this.myRef} />             </>         );     } } 复制代码

2. 子组件向父组件通信

1. 回调函数

如下代码所示,父组件显示当前计数值,但不通过父组件本身修改这个值。父组件给子组件传递一个函数,子组件点击按钮时,调用这个函数,实现计数值加一。

在子组件内部,修改了父组件中的值,从而完成了子组件向父组件通信。

import { useState } from 'react'; const Son = ({ setCount }) => {     return <button onClick={() => setCount(count => count + 1)}>点击+1</button>; }; const Father = () => {     const [count, setCount] = useState(0);     return (         <>             <div>计数值:{count}</div>             <Son setCount={setCount} />         </>     ); }; export default Father; 复制代码

2. 事件冒泡

如下代码,利用了事件冒泡机制,点击子组件的button按钮,事件会冒泡到父组件身上,触发父组件的onClick函数,打印出Jack

点击的是子组件,父组件执行函数,完成了子组件向父组件通信。

const Son = () => {     return <button>点击</button>; }; const Father = () => {     const sayName = name => {         console.log(name);     };     return (         <div onClick={() => sayName('Jack')}>             <Son />         </div>     ); }; export default Father;


作者:火星飞鸟
链接:https://juejin.cn/post/7028779975780073485

文章分类
代码人生
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐