React父组件函数传递给子组件后无法调用问题排查

问题原因 #

子组件的onConfirm回调中仅引用了函数，但未执行调用操作。具体来说，() => {props.confirmFunc}这个箭头函数只是返回了props.confirmFunc的引用，并没有触发函数执行。

修复方案 #

修改子组件的onConfirm配置，两种有效方式任选其一：

方式一：直接传递函数引用 #

onConfirm={props.confirmFunc}

方式二：在箭头函数中主动调用函数 #

onConfirm={() => { props.confirmFunc(); }}

修复后的完整子组件代码 #

import React, { useRef, useState, useEffect } from "react";
import SweetAlert from "react-bootstrap-sweetalert";

export const BasicAlert = (props) => {
  console.log(props);
  return(
      <SweetAlert
        warning
        style={{ display: "block", marginTop: "-100px" }}
        title='del'
        onConfirm={props.confirmFunc}
        // onCancel={() => {return {...params,gubun:'fail'}}}
        confirmBtnBsStyle="info"
        cancelBtnBsStyle="danger"
        confirmBtnText="doing"
        cancelBtnText="cancle"
        showCancel
      >
        del
      </SweetAlert>
  );
};

补充说明 #

• 如果需要给父组件函数传递参数，可通过箭头函数包裹实现：onConfirm={() => props.confirmFunc(自定义参数)}
• 父组件传递函数的逻辑是正确的，无需修改。

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