React.js中如何调用同级组件内声明的函数？

适用场景：根组件为App.js，CustomPlayer与PlayButton为同级子组件，需在PlayButton中调用CustomPlayer内声明的函数。
两种方案都无需调整现有组件层级，仅通过父组件App.js中转即可实现需求

方案1：状态提升到父组件中转（轻量场景首选） #

• 步骤1：在CustomPlayer组件挂载时，将需要对外暴露的函数通过回调提交给父组件App.js存储

// CustomPlayer.jsx
import { useEffect } from 'react'

const CustomPlayer = ({ onExposeMethods }) => {
  // 需被外部调用的目标函数
  const play = () => console.log('执行播放逻辑')
  const pause = () => console.log('执行暂停逻辑')

  useEffect(() => {
    // 组件挂载时将方法传递给父组件
    onExposeMethods({ play, pause })
  }, [onExposeMethods])

  return <div>自定义播放器</div>
}
export default CustomPlayer

• 步骤2：在App.js中定义状态存储播放器方法，再将方法传递给PlayButton组件

// App.jsx
import { useState } from 'react'
import CustomPlayer from './CustomPlayer'
import PlayButton from './PlayButton'

function App() {
  // 存储CustomPlayer暴露的方法
  const [playerMethods, setPlayerMethods] = useState({})

  return (
    <div className="App">
      <CustomPlayer onExposeMethods={setPlayerMethods} />
      <PlayButton playerMethods={playerMethods} />
    </div>
  )
}
export default App

• 步骤3：在PlayButton中直接调用传入的播放器方法

// PlayButton.jsx
const PlayButton = ({ playerMethods }) => {
  const handleClick = () => {
    // 可选链调用避免未挂载时报错
    playerMethods?.play?.()
  }

  return <button onClick={handleClick}>播放</button>
}
export default PlayButton

方案2：useImperativeHandle + forwardRef 暴露组件实例方法 #

• 步骤1：用forwardRef包裹CustomPlayer，通过useImperativeHandle对外暴露指定方法

// CustomPlayer.jsx
import { forwardRef, useImperativeHandle } from 'react'

const CustomPlayer = forwardRef((props, ref) => {
  const play = () => console.log('执行播放逻辑')
  const pause = () => console.log('执行暂停逻辑')

  // 向外部ref暴露指定方法
  useImperativeHandle(ref, () => ({
    play,
    pause
  }))

  return <div>自定义播放器</div>
})
export default CustomPlayer

• 步骤2：在App.js中创建ref绑定到CustomPlayer，再将ref传递给PlayButton

// App.jsx
import { useRef } from 'react'
import CustomPlayer from './CustomPlayer'
import PlayButton from './PlayButton'

function App() {
  const playerRef = useRef(null)

  return (
    <div className="App">
      <CustomPlayer ref={playerRef} />
      <PlayButton playerRef={playerRef} />
    </div>
  )
}
export default App

• 步骤3：在PlayButton中通过ref调用播放器方法

// PlayButton.jsx
const PlayButton = ({ playerRef }) => {
  const handleClick = () => {
    playerRef.current?.play?.()
  }

  return <button onClick={handleClick}>播放</button>
}
export default PlayButton

扩展说明 #

如果项目复杂度高、组件嵌套层级深，也可以引入Zustand、Jotai、Redux等全局状态管理库，将播放器的操作方法统一存入全局store，两个组件直接对接store即可实现方法调用，不需要逐层传递props。

内容的提问来源于stack exchange，提问作者Pranab Bora