作用:将函数内的方法返回给ref绑定的组件
类组件写法:利用ref, 在父组件中调用子组件事件
这个Hook的第三个参数是一个[], 这个[]中的数据决定了这个Hook会再次执行
Hello.js
import React, {Component} from 'react'
export default class Hello extends Component {
handler = () => {
alert('Hello world')
}
render() {
return (
<div>Hello</div>
)
}
}
App.js
import Hello from "./components/Hello";
import React from "react";
export default class App extends React.Component {
fn= () => {
this.hello.handler()
}
render() {
return (
<div>
<button type = "primary" onClick = {this.fn}>click</button>
<Hello ref = {el => this.hello = el}></Hello>
</div>
)
}
}
函数组件写法:
利用useImperativeHandler
Hello.js
import React, {Component, forwardRef,useState, useImperativeHandle} from 'react'
export default forwardRef(function Hello(props, ref) {
const [n, setN] = useState(0)
// 定义方法
useImperativeHandle(ref, () => {
// 这里定义让父组件执行的方法
return {
add() {
setN(n=> n + 1)
}
}
}, []) // 第三个参数, n的改变会影响回调函数的执行
return (
<div>Hello内部的{n}</div>
)
})
App.js
import Hello from "./components/Hello";
import React, {useRef} from "react";
export default function App() {
const hello = useRef(null)
const handler = () => {
// 拿到hello内部的方法
console.log("hello", hello)
hello.current.add()
}
return (
<div>
<button onClick = {handler}>触发hello组件中的方法</button>
<Hello ref = {hello}/>
</div>
)
}