React项目中如何在子函数组件调用父组件的Mapbox地图操作函数

错误原因 #

• 子组件使用forwardRef时未接收ref参数，无法获取父组件传递的ref实例
• 父组件向ref绑定的是test33函数本身，子组件调用时多写了一层.test33属性，匹配错误
• 该场景属于子组件触发父组件逻辑，优先使用props透传方法即可，无需额外使用ref增加复杂度

方案1：Props透传（推荐） #

符合React单向数据流设计，实现最简单

父组件修改

删除无用的buttonref声明，直接将方法作为props传递给子组件：

// 删掉无用代码：const buttonref = useRef(test33);
return (
  <div>
    <div className='sidebarStyle'>
      <div>
        Longitude: {lng} | Latitude: {lat} | Zoom: {zoom}
        <br />
        <TestJs onFlyTo={test33} />
      </div>
    </div>
    <div className='map-container' ref={mapContainerRef} />
  </div>
);

子组件修改

直接接收props调用方法即可，无需使用forwardRef：

import React from 'react'

const Test = (props) => {
    return (
        <button onClick={props.onFlyTo}>Button</button>
    )
}

export default Test

方案2：forwardRef实现（适用于必须使用ref的场景） #

子组件修改

forwardRef需要显式接收ref作为第二个参数：

import React, {forwardRef} from 'react'

const Test = forwardRef((props, ref) => {
    return (
        // 加可选链防止ref未初始化时报错
        <button onClick={() => ref.current?.()}>Button</button>
    )
})

export default Test

内容的提问来源于stack exchange，提问作者Nikita Golik