在react中，使用ref获子取组件实例

在 React 中，你可以使用 ref 来获取子组件的实例。以下是一些使用 ref 获取子组件实例的常见方法：

使用createRef 函数

import React, { createRef } from 'react';

export default class ParentComponent extends React.Component {
  childRef = createRef()
  componentDidMount () {
    // 子组件实例
    console.log(this.childRef.current,'类组件Ref')
    this.childRef.current.addPerson()
  }
  render () {
    return 
  }
}

class ChildComponent extends React.Component {
  state = {
    personList: ['张三', '李四']
  }
  addPerson () {
    console.log('添加一个人')
  }

  render () {
    return 
Hello World
  }
}

请注意，如果子组件是函数式组件，则需要使用 forwardRef 来包装子组件，以便能够正确地传递 ref。 

 在 React 中，如果子组件是函数式组件，你可以使用 forwardRef 来包装子组件，以便能够正确地传递 ref。以下是一个示例：

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

const ChildComponent = forwardRef((props, ref) => {
  const [count,setCount] = React.useState(0)
  // 暴露给父组件的属性---ref是必须项
  useImperativeHandle(ref, () => ({
    count,
    addCount
  }))
  const addCount = () => {
    setCount(count => count + 1)
  }
  return (
    

      改变值
      
函数子组件----{count}
    
  )
})

export default class ParentComponent extends React.Component {

  childRef = React.createRef()

  componentDidMount () {
    console.log(this.childRef, '函数子组件')
    this.childRef.current.addCount()
  }

  render () {
    return (
      
    )
  }
}

在这个例子中，ChildComponent 是一个函数式组件，使用 forwardRef 包装后，我们可以访问传递给 ChildComponent 的 ref，通过暴露(useImperativeHandle函数)，在 ParentComponent 中就可以通过 this.childRef.current 访问子组件实例了。