子组件接收父组件函数
时间: 2023-09-09 21:10:25 浏览: 42
子组件可以通过props接收父组件传递的函数。在父组件中定义一个函数,并将其作为prop传递给子组件。子组件在需要调用该函数时,可以通过props直接访问并执行该函数。
下面是一个示例:
```javascript
// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';
class ParentComponent extends React.Component {
// 定义一个函数作为prop
handleClick() {
console.log('点击事件触发');
}
render() {
return (
<div>
<ChildComponent handleClick={this.handleClick} />
</div>
);
}
}
// 子组件
import React from 'react';
class ChildComponent extends React.Component {
render() {
return (
<button onClick={this.props.handleClick}>点击我</button>
);
}
}
```
在上述示例中,父组件`ParentComponent`定义了一个`handleClick`函数,并将其作为`handleClick` prop传递给子组件`ChildComponent`。子组件通过`this.props.handleClick`访问并执行父组件传递的函数。当点击按钮时,子组件会触发父组件的`handleClick`函数,并在控制台上打印出"点击事件触发"。