新窗口Portal场景下React-aria事件不触发问题

你的实现存在两处问题，核心问题是react-aria的事件机制和跨标签页Portal的运行环境不匹配：

• react-aria没有把交互事件直接绑定在单个DOM元素上，而是统一委托到当前运行上下文的全局window对象上，以此实现全局点击检测、键盘快捷键响应、焦点管理等无障碍相关能力。你通过window.open打开的新标签页是完全独立的浏览器运行上下文，拥有独立的window、document实例，Portal渲染到新标签页的DOM触发的事件只会冒泡到新标签页的window，而react-aria默认把所有事件监听器绑定在了原页面的window上，自然收不到任何事件，这也是所有react-aria交互能力全部失效的核心原因。原生onClick直接绑定在DOM元素上，所以不受这个机制影响。
• 你写的MyButton组件有个遗漏：创建的ref没有挂载到原生button元素上，哪怕在同页面渲染，也可能出现焦点丢失、键盘交互不响应的问题。

直接用react-aria官方提供的跨环境上下文Provider，把新标签页的window、document实例传递给内部的react-aria组件即可，不需要修改业务组件的交互逻辑，修复后的完整代码如下：

import { useRef, useState, useMemo, useEffect } from 'react';
import { createPortal } from 'react-dom';
import { useButton } from '@react-aria/button';
// 引入react-aria的全局环境Provider
import { Provider } from '@react-aria/provider';

const MyButton = props => {
    const ref = useRef();
    const { buttonProps } = useButton(props, ref);
    // 记得把ref挂载到原生button上
    return <button {...buttonProps} ref={ref}>{props.children}</button>
}

const WindowPortal = () => {
    const [isInitialized, setInitialized] = useState(false);
    const container = useMemo(() => document.createElement("div"), []);
    const externalWindowRef = useRef(null);

    useEffect(() => {
        if (!container) return;
        const externalWindow = window.open("", "_blank");
        externalWindowRef.current = externalWindow;
        
        // 可选：拷贝原页面的样式到新标签页，避免样式丢失
        Array.from(document.styleSheets).forEach(sheet => {
            if (sheet.href) {
                const link = externalWindow.document.createElement('link');
                link.rel = 'stylesheet';
                link.href = sheet.href;
                externalWindow.document.head.appendChild(link);
            } else {
                const style = externalWindow.document.createElement('style');
                style.textContent = Array.from(sheet.cssRules).map(rule => rule.cssText).join('');
                externalWindow.document.head.appendChild(style);
            }
        });

        externalWindow.document.body.appendChild(container);
        setInitialized(true);
        return () => externalWindow.close();
    }, [container]);

    if (!container || !isInitialized || !externalWindowRef.current) {
        return null;
    }

    return createPortal(
        // 传入新标签页的window和document，让react-aria把事件绑定到正确的上下文
        <Provider
            window={externalWindowRef.current}
            document={externalWindowRef.current.document}
        >
            <MyButton onPress={() => console.log("My button is working!")}>My button</MyButton>
            <button onClick={() => console.log("Native button is working!")}>Native button</button>
        </Provider>,
        container
    );
};

额外注意事项 #

• 如果你使用的react-aria版本低于3.23.0，没有导出Provider组件，建议升级到最新稳定版使用官方原生支持的跨环境能力，不要自行hack事件绑定，避免后续版本升级出现兼容问题。
• window.open调用必须放在用户主动交互的事件回调（比如点击原页面按钮触发打开新标签页）中，否则会被浏览器的弹窗拦截策略直接拦截，导致新标签页创建失败。
• 如果新标签页需要和原页面共享状态，注意跨上下文的状态传递不要直接传递DOM节点、window这类不可序列化的对象，正常通过React上下文、props传递状态即可。

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