能否动态设置ReactNode内元素的onClick函数？

下面提供几种无需提前生成提示ID的实现方式，适配你的React Bootstrap提示场景：

方案1：让addAlert返回生成的ID，在调用处绑定清除逻辑 #

修改addAlert函数使其返回新创建提示的ID，调用方拿到ID后直接绑定到撤销链接的点击事件中：

App.tsx

function addAlert(content: React.ReactNode): string {
  const alertId = uuid(); // 用任意ID生成方式，比如uuid库
  setAlerts(prev => [...prev, { id: alertId, content }]);
  return alertId;
}

CurrentItems.tsx

const handleUndoableAction = () => {
  // 执行核心操作逻辑...
  
  // 添加提示并获取ID
  const alertId = addAlert(
    <>
      操作已完成。
      <Alert.Link onClick={() => {
        undoLastAction(); // 执行撤销逻辑
        clearAlert(alertId); // 清除当前提示
      }}>撤销上一步操作</Alert.Link>
    </>
  );
};

方案2：让addAlert接收“内容生成函数”，自动注入清除能力 #

让addAlert支持传入函数类型的内容，该函数接收当前提示的清除方法，返回最终的提示内容，无需调用方处理ID：

App.tsx

type AlertContent = React.ReactNode | ((clearSelf: () => void) => React.ReactNode);

function addAlert(content: AlertContent): void {
  const alertId = uuid();
  const clearSelf = () => clearAlert(alertId);
  
  const finalContent = typeof content === 'function' 
    ? content(clearSelf) 
    : content;
  
  setAlerts(prev => [...prev, { id: alertId, content: finalContent }]);
}

CurrentItems.tsx

const handleUndoableAction = () => {
  // 执行核心操作逻辑...
  
  addAlert((clearSelf) => (
    <>
      操作已完成。
      <Alert.Link onClick={() => {
        undoLastAction();
        clearSelf(); // 直接调用清除当前提示
      }}>撤销上一步操作</Alert.Link>
    </>
  ));
};

方案3：递归修改ReactNode中的Alert.Link，自动绑定清除逻辑 #

完全在addAlert内部处理，通过递归遍历ReactNode，用cloneElement包装Alert.Link的点击事件，注入清除当前提示的逻辑：

App.tsx

import { cloneElement, ReactNode } from 'react';
import { Alert } from 'react-bootstrap';

// 递归处理ReactNode，给所有Alert.Link添加清除逻辑
const enhanceAlertContent = (content: ReactNode, clearSelf: () => void): ReactNode => {
  if (!React.isValidElement(content)) {
    return content;
  }
  
  // 识别Alert.Link，包装原有点击事件
  if (content.type === Alert.Link) {
    const originalOnClick = content.props.onClick;
    return cloneElement(content, {
      onClick: (e: React.MouseEvent) => {
        originalOnClick?.(e); // 执行原点击逻辑
        clearSelf(); // 清除当前提示
      }
    });
  }
  
  // 递归处理子元素
  return cloneElement(content, {}, React.Children.map(content.props.children, child => 
    enhanceAlertContent(child, clearSelf)
  ));
};

function addAlert(content: React.ReactNode): void {
  const alertId = uuid();
  const clearSelf = () => clearAlert(alertId);
  const enhancedContent = enhanceAlertContent(content, clearSelf);
  
  setAlerts(prev => [...prev, { id: alertId, content: enhancedContent }]);
}

CurrentItems.tsx（无需修改，直接传入原有内容）

const handleUndoableAction = () => {
  // 执行核心操作逻辑...
  
  addAlert(
    <>
      操作已完成。
      <Alert.Link onClick={undoLastAction}>撤销上一步操作</Alert.Link>
    </>
  );
};

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