子组件调用父组件的方法

137 阅读1分钟

在React中,子组件可以通过props与父组件通信。如果你想要子组件调用父组件的方法,你可以将父组件的方法通过props传递给子组件,然后在子组件内部调用这个方法。

以下是一个简单的例子:

父组件:


import React from 'react';  
import ChildComponent from './ChildComponent';  
  
class ParentComponent extends React.Component {  
parentMethod = () => {  
console.log('Parent method called');  
}  
  
render() {  
return (  
<ChildComponent parentMethod={this.parentMethod} />  
);  
}  
}  
  
export default ParentComponent;

子组件:

import React from 'react';  
  
const ChildComponent = ({ parentMethod }) => {  
const callParentMethod = () => {  
parentMethod();  
}  
  
return (  
<button onClick={callParentMethod}>Call Parent Method</button>  
);  
}  
  
export default ChildComponent;

在这个例子中,ParentComponent 有一个方法 parentMethod,它通过props parentMethod 被传递给了 ChildComponent。在 ChildComponent 中,你可以通过调用 this.props.parentMethod() 来调用父组件的方法。