React hooks 中ref、useRef和forwardRef 的用法（父子组件通讯）

68 阅读 0 评论 45 点赞

我是靠谱客的博主聪慧烧鹅，最近开发中收集的这篇文章主要介绍React hooks 中ref、useRef和forwardRef 的用法（父子组件通讯），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

Forwarding Refs – Reacthttps://reactjs.org/docs/forwarding-refs.html

父调子组件 DOM 聚焦


import React, { useRef, forwardRef } from 'react';
import { Card, Button } from 'antd';

const Child = forwardRef((props,cRef) => {
  // const inputRef = useRef()
  const onClick = () => {
    cRef.current.focus()
  }
  
  return (
    <div style={{border: '1px solid red'}}>
      <input type='text' ref={cRef}></input>
      <Button onClick={onClick}>子组件DOM聚焦</Button>
    </div>
  )
})

const App: React.FC = () => {
  const cRef:any = useRef() // 或 const cRef:any = createRef()
  const onClick = () => {
    if(cRef.current){
      cRef.current.focus()
    }
  }
  
  return (
    <Card>
      <Child ref={cRef}></Child>
      <br/>
      <Button onClick={onClick}>父调子组件DOM 聚焦</Button>
    </Card>
  )
}
export default App

父调子组件 Func 聚焦


import React, { useRef, forwardRef, useImperativeHandle } from 'react';
import { Card, Button } from 'antd';

const Child = forwardRef((props,cRef) => {
  const inputRef = useRef()
  const onClick = () => {
    inputRef.current.focus()
  }
  useImperativeHandle(cRef, () => ({
    chidFunc: () => {
      console.log('这是子组件函数')
      inputRef.current.focus();
    }
  }));
  
  return (
    <div style={{border: '1px solid red'}}>
      <input type='text' ref={inputRef}></input>
      <Button onClick={onClick}>子组件DOM聚焦</Button>
    </div>
  )
})

const App: React.FC = () => {
  const cRef:any = useRef() // 或 const cRef:any = createRef()
  const onClickChildren = () => {
    if(cRef.current){
      cRef.current.chidFunc()
    }
  }
  
  return (
    <Card>
      <Child ref={cRef}></Child>
      <br/>
      <Button onClick={onClickChildren}>父调子组件Func 聚焦</Button>
    </Card>
  )
}
export default App

注：编写中发现同时操作DOM、Func有冲突，会报错，暂未解决。

官方useImperativeHandle示例：

import React, { useRef, useImperativeHandle } from 'react';
import ReactDOM from 'react-dom';

const FancyInput = React.forwardRef((props, ref) => {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));

  return <input ref={inputRef} type="text" />
});

const App = props => {
  const fancyInputRef = useRef();

  return (
    <div>
      <FancyInput ref={fancyInputRef} />
      <button
        onClick={() => fancyInputRef.current.focus()}
      >父组件调用子组件的 focus</button>
    </div>
  )
}

ReactDOM.render(<App />, root);

其他

import React, { forwardRef, useImperativeHandle, useEffect, useRef } from 'react'

const TestRef = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    open() {
      console.log("open")
    }
  }))
})

function App () {
  const ref = useRef()
  useEffect(() => {
    ref.current.open()
  },[])
  
  return(
    <>
      <div>石小阳</div>
      <TestRef ref={ref}></TestRef>
    </>
  )
}
export default App