react 函数组件 子组件向父组件通信
时间: 2023-11-25 15:06:50 浏览: 50
React函数组件中,子组件向父组件通信可以通过以下两种方式实现:
1. 父组件通过props将方法传递给子组件,子组件调用该方法来向父组件传递信息。
引用中的例子中,子组件Child通过父组件传入的MakeMoney方法调用父组件方法,实现了子组件向父组件通信的功能。
2. 使用回调函数,将子组件中的信息传递给父组件。
引用中的例子中,函数子组件ChildByCallback2通过props接收父组件传递的myClick方法,并在点击按钮时调用该方法,将信息传递给父组件。
以下是一个使用回调函数实现子组件向父组件通信的例子:
```jsx
import React from "react";
import { Button } from "antd";
export default function ChildByCallback({ onChildClick }) {
const handleClick = () => {
onChildClick("我是函数子组件");
};
return (
<Button type="primary" onClick={handleClick}>
click me
</Button>
);
}
```
在父组件中,可以通过以下方式调用子组件并传递回调函数:
```jsx
import React from "react";
import ChildByCallback from "./ChildByCallback";
export default function Parent() {
const handleChildClick = (msg) => {
console.log(msg);
};
return (
<div>
<ChildByCallback onChildClick={handleChildClick} />
</div>
);
}
```