react中父组件调用子组件的方法

简介: 最近项目中用到了react,需要在父组件中调用子组件的某个方法,那么如何获取到子组件的实例呢?这里使用了回调,简单实用,兼容低版本。

react中父组件调用子组件的方法

最近项目中用到了react,需要在父组件中调用子组件的某个方法,那么如何获取到子组件的实例呢?
这里使用了回调,简单实用,兼容低版本。

class Parent extends Component {

  componentDidMount() {
    ...
  }
  
  forceRefresh() {
    // 调用子组件的refresh()方法刷新。
    this.xxxChildView.refresh();
  }
  ...
  render() {
    return (
        <ChildView ref={(ref) => this.xxxChildView = ref} >
            ...
        </ChildView>
    );
}

子组件:

class ChildView extends Component {

  componentDidMount() {
    ...
  }
  
  // 对外提供的刷新方法
  refresh() {
    ...
  }
  ...
  render() {
    return (
        ...
    );
}

参考

1、https://react-cn.github.io/react/docs/more-about-refs.html#

相关文章
|
1月前
|
前端开发
|
1月前
|
Android开发
jmessage-react-plugin的正确引入方法
jmessage-react-plugin的正确引入方法
12 1
|
2月前
|
前端开发 JavaScript 开发者
请详细介绍React挂载阶段的方法。
请详细介绍React挂载阶段的方法。
53 9
|
3月前
|
前端开发 JavaScript
React 组件生命周期方法详解
【8月更文挑战第30天】
47 5
|
2月前
封装react-antd-table组件参数以及方法如rowSelection、pageNum、pageSize、分页方法等等
文章介绍了如何封装React-Antd的Table组件,包括参数和方法,如行选择(rowSelection)、页码(pageNum)、页面大小(pageSize)、分页方法等,以简化在不同表格组件中的重复代码。
61 0
|
3月前
|
前端开发 JavaScript API
学习 React 的方法
【8月更文挑战第26天】学习 React 的方法
37 1
|
3月前
|
前端开发 JavaScript 开发者
React生命周期方法完全指南:深入理解并高效应用每个阶段的钩子——从初始化到卸载的全方位解析
【8月更文挑战第31天】本文详细介绍了React组件生命周期方法,包括初始化、挂载、更新和卸载四个阶段的关键钩子。通过探讨每个阶段的方法,如`componentDidMount`和`componentWillUnmount`,帮助开发者在正确时机执行所需操作,提升应用性能。文章还提供了最佳实践,指导如何避免常见错误并充分利用最新钩子。
90 0
|
3月前
|
前端开发 JavaScript 开发者
React 中的生命周期方法是什么?
【8月更文挑战第31天】
53 0
|
4月前
|
前端开发 Scala
Scala并发编程的react、loop方法详解
在这个例子中,`MyActor`会无限循环接收和处理消息。当收到一个字符串消息时,它会打印出"Received: "加上消息内容。如果收到其他类型的消息,它会打印"Unknown message"。
27 1
|
前端开发
【React工作记录一】简单的React父向子组件传值props
【React工作记录一】简单的React父向子组件传值props
114 0