如何通过React父组件调用子组件中的方法实例进行详细操作？

本文共计1228个文字，预计阅读时间需要5分钟。

目录 + Class组件

1.自定义事件

2.使用 React.createRef()

3.使用回调Refs + 函数组件

补充：- 子组件调用父组件方法- 总结 + 文章中涉及 ref 的应用仅为父组件调用子组件场景下的应用方式，未涉及其他场景

目录

• Class组件
• 1. 自定义事件
• 2. 使用 React.createRef()
• 3. 使用回调Refs
• Function组件
• 补充：子组件调用父组件方法
• 总结

文章中涉及 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父组件调用子组件方法内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！