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

在开发react中通常会遇到

在子组件里边触发了某个事件 然后我想在父组件里边也调用某个函数 来触发

这个时候就要用到React子组件调用父组件的方法

废话不多说 直接上代码

  <div className="forestFire-container">
      {/* 搜索框 */}
      <SearchDrawer
        ref={searchDrawerRef}
        visible={searchDrawerVisible}
        setVisible={setSearchDrawerVisible}
        onSetPosition={onSetPosition}
        onFireList={onFireList} // 在父组件里边先自定一个自定义函数
      />
      </div>
      //然后写下逻辑 在子组件调用这个方法之后 父组件会进行什么样的操作
        function onFireList(e){
           addFire(e, MapInstance, mapRef);
        }

  function index({onFireList }, ref) {
    /* 获取火点信息 */
    function getFireListData() {
      // 子传父 自定义方法
      onFireList([
        {
          type: 'Feature',
          properties: {
            icon: 'fire-point' + 1,
          },
          geometry: {
            type: 'Point',
            coordinates: [109.8198, 36.5613],
          },
        },
      ])
    }
  }
  
  export default forwardRef(index)

在上述代码中 子组件调用getFireListData函数之后就会调用onFireList函数 并且传进去了一个数组

这时候父组件的onFireList就会被调用 并且接收到子组件传过来的函数 这样一来就完成了！