浅谈react hook （ useImperativeHandle）
作者：互联网
import React, { forwardRef, useRef, useImperativeHandle,useState} from "react";
import ReactDOM from "react-dom";
import "./index.css";
// useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值。在大多数情况下，应当避免使用 ref 这样的命令式代码。useImperativeHandle 应当与 forwardRef 一起使用。
// ref：定义 current 对象的 ref createHandle：一个函数，返回值是一个对象，即这个 ref 的 current
// 对象 [deps]：即依赖列表，当监听的依赖发生变化，useImperativeHandle 才会重新将子组件的实例属性输出到父组件
// ref 的 current 属性上，如果为空数组，则不会重新输出。
//forwardRef获取子组件的Dom
const Forward = forwardRef((props, ref) => {
// 监听当num变化的时候 count 才会传过来
const inputEl = useRef(null)
const [num,setNum] = useState(0)
const [count,setCount] = useState(0)
useImperativeHandle(ref, () => ({
name: '武大郎',
focus: () => {
inputEl.current.focus()
},
count
}),[num])
return (
<div>
<input type='text' ref={inputEl}></input>
<h1>{num}</h1>
<h1>{count}</h1>
<button onClick={() => {
setNum(num+1)
}}>num</button>
<button onClick={() => {
setCount(count+1)
}}>count</button>
</div>
)
})
// 子组件的方法和属性暴露给父组件
function App() {
const el = useRef(null)
return (
<div className="App">
<Forward ref={el}></Forward>
<button onClick={() => {
console.log(el.current);
console.log(el.current.focus);
el.current.focus()
}}>获取子组件的方法和属性</button>
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
标签：count,current,浅谈,useImperativeHandle,react,hook,num,组件,ref 来源： https://blog.csdn.net/snowXZZ/article/details/117561883