react父组件怎么调用子组件中的方法
时间: 2023-11-19 20:51:14 浏览: 81
可以通过在父组件中使用ref获取子组件实例,然后调用子组件中的方法。具体实现步骤如下:
1. 在子组件中定义需要调用的方法,并将其暴露出去,例如:
```
class ChildComponent extends React.Component {
myMethod() {
// do something
}
render() {
return (
// ...
);
}
}
export default ChildComponent;
```
2. 在父组件中使用ref获取子组件实例,并调用子组件中的方法,例如:
```
class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.childRef = React.createRef();
}
handleClick() {
this.childRef.current.myMethod();
}
render() {
return (
<div>
<ChildComponent ref={this.childRef} />
<button onClick={() => this.handleClick()}>调用子组件方法</button>
</div>
);
}
}
export default ParentComponent;
```
在上面的代码中,我们使用React.createRef()创建了一个ref,并将其赋值给子组件的ref属性。然后在父组件中定义一个handleClick方法,在该方法中通过this.childRef.current获取子组件实例,并调用其myMethod方法。
阅读全文