父组件向子组件传递函数
时间: 2023-09-19 07:08:39 浏览: 48
父组件向子组件传递函数可以通过props实现。在父组件中,定义一个函数,并将其作为prop传递给子组件。子组件可以通过props来接收这个函数并在需要的时候调用它。
以下是一个示例代码:
```jsx
// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';
function ParentComponent() {
// 定义一个函数
const handleClick = () => {
console.log('点击了按钮');
};
return (
<div>
<ChildComponent handleClick={handleClick} />
</div>
);
}
export default ParentComponent;
// 子组件
import React from 'react';
function ChildComponent(props) {
// 在需要的时候调用传递的函数
const handleButtonClick = () => {
props.handleClick();
};
return (
<div>
<button onClick={handleButtonClick}>点击我</button>
</div>
);
}
export default ChildComponent;
```
在上面的例子中,父组件中的`handleClick`函数被传递给了子组件的`handleClick` prop。子组件中的按钮被点击时,会调用父组件传递过来的函数。