react父组件调用子组件的方法

如果你使用的是函数式组件，可以使用React Hooks来实现父组件调用子组件的方法。具体步骤如下：

1. 在子组件中使用useImperativeHandle() Hook，将子组件的方法暴露给父组件。例如：

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

const ChildComponent = forwardRef((props, ref) => {
  const handleClick = () => {
    console.log('子组件被调用了')
  }

  useImperativeHandle(ref, () => ({
    handleClick
  }))

  return <div>子组件</div>
})

export default ChildComponent

在这个例子中，我们使用useImperativeHandle() Hook将子组件的handleClick()方法暴露给父组件，以便父组件可以调用它。

1. 在父组件中使用useRef() Hook，创建一个ref对象，并将其传递给子组件。例如：

import React, { useRef } from 'react'
import ChildComponent from './ChildComponent'

const ParentComponent = () => {
  const childRef = useRef(null)

  const handleClickChild = () => {
    childRef.current.handleClick()
  }

  return (
    <div>
      <ChildComponent ref={childRef} />
      <button onClick={handleClickChild}>调用子组件方法</button>
    </div>
  )
}

export default ParentComponent

在这个例子中，我们使用useRef() Hook创建了一个childRef对象，并将其传递给子组件。在父组件中定义了一个handleClickChild()方法，用于调用子组件的handleClick()方法。

1. 在父组件中的handleClickChild()方法中调用子组件的方法。例如：

import React, { useRef } from 'react'
import ChildComponent from './ChildComponent'

const ParentComponent = () => {
  const childRef = useRef(null)

  const handleClickChild = () => {
    childRef.current.handleClick()
  }

  return (
    <div>
      <ChildComponent ref={childRef} />
      <button onClick={handleClickChild}>调用子组件方法</button>
    </div>
  )
}

export default ParentComponent

在这个例子中，我们在handleClickChild()方法中调用子组件的handleClick()方法。

通过以上步骤，就可以在函数式组件中使用React Hooks来实现父组件调用子组件的方法。