ReactDOM createPortal渲染子组件失效，OperationButton的onConfirm事件异常

问题根因与修复方案 #

你遇到的事件无法触发问题主要由以下几个可排查的点导致，按优先级逐一排查即可：

1. 修复错误的定位属性 #

你代码里的position: 'alternative'是无效属性，CSS不存在这个定位值，会导致下拉容器定位逻辑完全失效，大概率出现容器被上层透明元素遮挡、点击区域错位的问题，首先把该属性改为有效值：

• 要相对于触发按钮的定位父级做偏移：改为position: 'absolute'
• 要相对于浏览器视口做定位：改为position: 'fixed'
  修正后的核心代码如下：

createPortal(
  <div
    className={`widgetActionsMenu`}
    // 修复无效定位属性，同时加上z-index保证层级足够
    style={{ position: 'absolute', top: '27px', zIndex: 9999 }}>
    {allowedOperations.map((pseudoOperation) => {
      const [operation, disabled] = pseudoOperation.split(':');
      return (
        <OperationButton
            disabled={!!disabled}
            key={operation}
            operation={operation}
            itemId={props.itemId}
        />
      );
    })}
  </div>,
  document.querySelector(`.flowChartActionLevel`)
)

2. 排查挂载节点的事件拦截 #

检查你挂载portal的目标节点.flowChartActionLevel及其父元素：

• 是否设置了pointer-events: none属性，如果有，给.widgetActionsMenu加上pointer-events: auto覆盖该规则
• 是否绑定了click事件且调用了e.stopPropagation()、e.preventDefault()拦截了事件冒泡

3. 排查自定义组件的事件绑定 #

确认OperationButton组件内部逻辑：

• 是否正确接收了和operation参数对应的onConfirm回调
• 是否将onConfirm回调正确绑定到了组件内部的可点击元素（比如<button>标签）的点击事件上

4. 层级校验 #

打开浏览器开发者工具的元素选择器，直接点击页面上的OperationButton渲染的按钮，看选中的元素是否是按钮本身：

• 如果选中的是其他元素，说明下拉容器被遮挡，给.flowChartActionLevel也加上足够高的z-index值，保证它所在的堆叠上下文层级高于其他页面元素
• 如果能正常选中按钮，给按钮的onClick事件加临时日志，确认点击时是否能触发基础点击事件，排查组件内部事件逻辑问题

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