脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React父组件调用子组件方法

React父组件调用子组件中的方法实例详解

 更新时间：2022年07月14日 09:53:46   作者：小天才程序员  
最近做一个React项目,所有组件都使用了函数式组件,遇到一个父组件调用子组件方法的问题,下面这篇文章主要给大家介绍了关于React父组件调用子组件中方法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

文章中涉及 ref 的应用仅为父组件调用子组件场景下的应用方式，并未涵盖 ref 的所有应用方式！

Class组件

1. 自定义事件

 Parent.js

import React, { Component } from 'react';

import Child from './Child';

class Parent extends Component {
  componentDidMount () {
    console.log(this.childRef)
  }
  handleChildEvent = (ref) => {
  	// 将子组件的实例存到 this.childRef 中, 这样整个父组件就能拿到
    this.childRef = ref
  }
  //按钮事件处理
  handleClick = () => {
  	// 通过子组件的实例调用组组件中的方法
    this.childRef.sendMessage()
  }
  render () {
    return (
      <>
        <Child
          onChildEvent={this.handleChildEvent}
        />
        <button onClick={this.handleClick}>Trigger Child Event</button>
      </>
    );
  }
}

export default Parent;

Child.js

import React, { Component } from 'react';

class Child extends Component {
	//子组件完成挂载时, 将子组件的方法 this 作为参数传到父组件的函数中
  componentDidMount () {
  	// 在子组件中调用父组件的方法,并把当前的实例传进去
    this.props.onChildEvent(this)
  }
  // 子组件的方法, 在父组件中触发
  sendMessage = () => {
    console.log('sending message')
  }
  render () {
    return ( <div>Child</div> );
  }
}

export default Child;

2. 使用 React.createRef()

ParentCmp.js

import React, { Component } from 'react';

import ChildCmp from './ChildCmp';

export default class ParentCmp extends Component {
  constructor(props) {
    super(props)
    // 创建Ref
    this.childRef = React.createRef()
  }
  // 按钮事件
  handleClick = () => {
  	// 直接通过 this.childRef.current 拿到子组件实例
    this.childRef.current.sendMessage()
  }
  render () {
    return (
      <>
        <ChildCmp ref={this.childRef} />
        <button onClick={this.handleClick}>Trigger Child Event</button>
      </>
    );
  }
}

而子组件就是一个普通的组件

ChildCmp.js

import React, { Component } from 'react';

export default class ChildCmp extends Component {
  sendMessage = () => {
    console.log('sending message')
  }
  render () {
    return 'Child';
  }
}

3. 使用回调Refs

回调 Refs 是另一种设置 Ref 的方式，它能助你更精细地控制何时 refs 被设置和解除。

不同于传递 createRef() 创建的 ref 属性，需要传递一个函数。

访问 Ref 的时候也不需要 current。

ParentCmp.js

import React, { Component } from 'react';

import ChildCmp from './ChildCmp';

export default class ParentCmp extends Component {
  constructor(props) {
    super(props)
    // 创建 Ref，不通过 React.createRef()
    this.childRef = null
  }
  // 设置 Ref
  setChildRef = (ref) => {
    this.childRef = ref
  }
  // 按钮事件
  handleClick = () => {
    // 直接通过 this.childRef 拿到子组件实例
    this.childRef.sendMessage(`Trigger Child Event from Parent`)
  }

  render () {
    return (
      <>
        <ChildCmp ref={this.setChildRef} />
        <button onClick={this.handleClick}>Trigger Child Event</button>
      </>
    );
  }
}

而子组件还是一个普通的组件

ChildCmp.js

import { Component } from 'react';

export default class ChildCmp extends Component {
  sendMessage = (message) => {
    console.log('sending message:', message)
  }
  render () {
    return 'Child';
  }
}

【注】对比自定义事件方式，回调 Refs 更像是精简的自定义事件方式：

  • 自定义事件名称变成了 ref
  • 子组件内不需要手动绑定

Function组件

默认情况下，不能在函数组件上使用 ref 属性，因为它们没有实例。所以上面的两种方式是行不通的。

解决办法就是使用 forwardRef 和 useImperativeHandle。

不过在函数的内部是可以使用 useRef 钩子来获取组件内的 DOM 元素。

Parent.js

import React, { useRef } from 'react';

import Child from './Child';

const Parent = () => {
  // 通过 Hooks 创建 Ref
  const childRef = useRef(null)
  const handleClick = () => {
    childRef.current.sendMessage()
  }
  return (
    <>
      <Child
        ref={childRef}
      />
      <button onClick={handleClick}>Trigger Child Event</button>
    </>
  );
}
export default Parent;

Child.js

import React, { forwardRef, useImperativeHandle } from 'react';

const Child = forwardRef((props, ref) => {
  //将子组件的方法 暴露给父组件
  useImperativeHandle(ref, () => ({
    sendMessage
  }))
  const sendMessage = () => {
    console.log('sending message')
  }
  return ( <div>Child</div> );
})
export default Child;

注：

上面的例子中只是简单地演示了父子组件之间的方法调用，当然实际情况中子组件中可以也会有自己的 ref 指向自己内部的 DOM 元素，不过这些原理都是一样的。

补充：子组件调用父组件方法

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

父组件

 <NavBarX
   item={item}
   current={current}
   getBatchDetails={(id) => this.getBatchDetails(0, id)}
   setId={(id, callback) => this.setState({ id }, callback)}
   onRef={this.onNavBarXRef}
 />

子组件

     this.props.setId(prePageId, () => {
        getBatchDetails(prePageId)
      })

总结

到此这篇关于React父组件调用子组件中方法的文章就介绍到这了,更多相关React父组件调用子组件方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • react native环境安装流程

    react native环境安装流程

    React Native 是目前流行的跨平台移动应用开发框架之一。本文介绍react native环境安装流程及遇到问题解决方法，感兴趣的朋友一起看看吧
    2021-05-05
  • 使用React实现一个简单的待办任务列表

    使用React实现一个简单的待办任务列表

    这篇文章主要给大家介绍了使用React和Ant Design库构建的待办任务列表应用,它包含了可编辑的表格,用户可以添加、编辑和完成任务,以及保存任务列表数据到本地存储,文中有相关的代码示例,需要的朋友可以参考下
    2023-08-08
  • React.js前端导出Excel的方式

    React.js前端导出Excel的方式

    这篇文章主要为大家介绍了React.js前端导出Excel的方式详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-07-07
  • React-Native 组件之 Modal的使用详解

    React-Native 组件之 Modal的使用详解

    本篇文章主要介绍了React-Native 组件之 Modal的使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • React组件的生命周期深入理解分析

    React组件的生命周期深入理解分析

    组件的生命周期就是React的工作过程，就好比人有生老病死，自然界有日月更替，每个组件在网页中也会有被创建、更新和删除，如同有生命的机体一样
    2022-12-12
  • React Native实现简单的登录功能(推荐)

    React Native实现简单的登录功能(推荐)

    这篇文章主要介绍了React Native实现登录功能的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-09-09
  • React videojs 实现自定义组件(视频画质/清晰度切换) 的操作代码

    React videojs 实现自定义组件(视频画质/清晰度切换) 的操作代码

    最近使用videojs作为视频处理第三方库,用来对接m3u8视频类型,这里总结一下自定义组件遇到的问题及实现,感兴趣的朋友跟随小编一起看看吧
    2023-08-08
  • React-router 4 按需加载的实现方式及原理详解

    React-router 4 按需加载的实现方式及原理详解

    本篇文章主要介绍了React-router 4 按需加载的实现方式及原理详解，非常具有实用价值，需要的朋友可以参考下
    2017-05-05
  • 在React中引入Tailwind CSS的完整指南

    在React中引入Tailwind CSS的完整指南

    在现代前端开发中,使用 UI 库可以显著提高开发效率,Tailwind CSS 是一个功能类优先的 CSS 框架,本文将详细介绍如何在 React 项目中引入和使用 Tailwind CSS,包括各种配置选项和最佳实践,需要的朋友可以参考下
    2025-04-04
  • react如何添加less环境配置

    react如何添加less环境配置

    这篇文章主要介绍了react如何添加less环境配置，本文给大家分享遇到问题及解决方案，结合示例代码图文给大家介绍的非常详细，需要的朋友参考下吧
    2022-05-05

最新评论