React 父子组件通信的几种方法
在 React 中,父子组件的通信是常见的问题,除了使用状态管理工具(如redux)以外,也可以实现父子组件的相互通信。其中,父组件可以通过props、原型方法向子组件通信,子组件可以通过回调函数、事件冒泡向父组件通信。1. 父组件向子组件通信1. props如下代码,name作为props由父组件传递给子组件,子组件拿到name后,渲染在页面上。参数name由父组件传递给了子组件。import
在 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://lzxjack.top/
更多推荐
所有评论(0)