如何在React中点击按钮将组件打开至新窗口？

window.open() 不能直接传入 React 组件——它的第一个参数只接受URL 字符串或HTML 字符串，你传的 <Contact /> 是 React 元素对象，会被自动转成 [object Object]，自然无法正常打开组件。

下面给你两种可行的实现方案：

方案一：给 Contact 组件配置独立路由（推荐） #

这是 React 单页应用里最常规的做法，给 Contact 组件分配一个独立路由，点击按钮时直接打开该路由的 URL。

步骤1：配置路由 #

假设你用 react-router-dom，先在路由配置文件里给 Contact 组件添加路由：

// 比如 App.js 或专门的路由文件
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Contact from './Contact';
// 其他组件导入...

function App() {
  return (
    <Router>
      <Routes>
        {/* 其他已有路由 */}
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Router>
  );
}

步骤2：修改 ContactMe.jsx 添加点击事件 #

给按钮绑定点击函数，调用 window.open 打开路由地址：

import '../App.css';
import Contact from './Contact';
import { ReactComponent as LinkedInLogo } from '../images/linkedin.svg';

function ContactMe() {
  const handleOpenContact = () => {
    // 打开新窗口，指向 Contact 组件的路由
    window.open('/contact', '_blank');
  };

  return(
      <>
      <div className='contact-container' id='contactMe'>
          <div className='contact-box'>
              <h1>Want to connect?</h1>
              <button id='contact-me-btn' onClick={handleOpenContact}>Contact Me!</button>
              <a>
                  <LinkedInLogo title='LinkedIn Profile' id='linkedinprofile-svg'/>
              </a>
          </div>
          <div className='contact-container-footer'>
              <h7>Designed and built by <a href='https://github.com/BlazingIsFire' target='_blank' title='Github'>Andrew Schweitzer</a>.</h7>
          </div>
      </div>
      </>
  )   
}

export default ContactMe;

方案二：直接在新窗口挂载 React 组件（无需路由） #

如果不想新增路由，可以直接在新窗口的 DOM 里手动挂载 Contact 组件：

import '../App.css';
import Contact from './Contact';
import { ReactComponent as LinkedInLogo } from '../images/linkedin.svg';
import { createRoot } from 'react-dom/client';

function ContactMe() {
  const handleOpenContact = () => {
    // 打开空白新窗口
    const newWindow = window.open('', '_blank');
    if (!newWindow) {
      alert('弹窗被浏览器拦截，请允许弹窗权限');
      return;
    }

    // 给新窗口引入样式（保证组件样式正常）
    newWindow.document.head.innerHTML = `
      <link rel="stylesheet" href="${process.env.PUBLIC_URL}/App.css">
    `;

    // 创建根节点并挂载到新窗口
    const rootDiv = document.createElement('div');
    newWindow.document.body.appendChild(rootDiv);
    const root = createRoot(rootDiv);
    root.render(<Contact />);

    // 监听新窗口关闭，卸载组件避免内存泄漏
    newWindow.addEventListener('beforeunload', () => {
      root.unmount();
    });
  };

  return(
      <>
      <div className='contact-container' id='contactMe'>
          <div className='contact-box'>
              <h1>Want to connect?</h1>
              <button id='contact-me-btn' onClick={handleOpenContact}>Contact Me!</button>
              <a>
                  <LinkedInLogo title='LinkedIn Profile' id='linkedinprofile-svg'/>
              </a>
          </div>
          <div className='contact-container-footer'>
              <h7>Designed and built by <a href='https://github.com/BlazingIsFire' target='_blank' title='Github'>Andrew Schweitzer</a>.</h7>
          </div>
      </div>
      </>
  )   
}

export default ContactMe;

注意事项 #

• 浏览器可能会拦截弹窗，需要处理这种情况（示例里加了弹窗提示）
• 新窗口是独立的文档，需要手动引入样式文件，否则组件样式会丢失

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