React每日学习:在React中，如何调用父组件的子组件。这种方法在平时的项目中经常使用。今天我们来看看！
使用子组件是类组件 Refs；使用 React.createRef() 创建 Refs, Refs 可以通过 ref 当属性附加到元素节点时，我们可以通过 ref.current 访问附加元素节点。
剖析
文章中涉及 ref 该应用只是父组件调用子组件场景中的一种应用，不包括 ref 所有应用方法！
Class组件
自定义事件
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)
})
总结
不同的元素类型会导致不同的元素类型 ref 的值不同：
① 当 ref 附加元素是 HTML 元素时，ref.current 指的是底部的DOM元素。
② 当 ref 附加元素是 class 组件时，ref.current 指向 class 组件实例。
注：在默认情况下，函数组不能使用 ref 属性, 因为他们没有例子。但结合 forwardRef 我们可以在函数组件上使用方法 ref，以后会介绍。
