如何为Vite + React项目添加npm包（以react-new-window为例）

下面是在你的项目中使用react-new-window的完整操作步骤：

1. 安装依赖 #

在项目根目录下执行安装命令：

npm install react-new-window

2. 基础使用示例 #

在React组件中导入NewWindow组件，用它包裹需要在新窗口展示的内容即可。比如实现一个点击按钮切换新窗口显示的功能：

import { useState } from 'react';
import NewWindow from 'react-new-window';

function App() {
  const [showNewWindow, setShowNewWindow] = useState(false);

  return (
    <div>
      <button onClick={() => setShowNewWindow(!showNewWindow)}>
        {showNewWindow ? '关闭新窗口' : '打开新窗口'}
      </button>

      {showNewWindow && (
        <NewWindow>
          <div style={{ padding: '20px' }}>
            <h2>新窗口内容</h2>
            <p>这里可以放置任意React组件或普通内容</p>
          </div>
        </NewWindow>
      )}
    </div>
  );
}

export default App;

3. 自定义窗口配置（可选） #

通过传递props可以定制新窗口的行为和样式，常用配置项包括：

• width/height: 设置窗口宽高（单位：像素）
• title: 设置新窗口标题
• left/top: 设置窗口打开时的位置
• features: 传递原生window.open的特性字符串（如resizable=no,scrollbars=no）

示例：

<NewWindow
  width={600}
  height={400}
  title="我的自定义窗口"
  left={200}
  top={100}
  features="resizable=no,scrollbars=yes"
>
  <div>
    <h3>自定义配置的新窗口</h3>
    <p>窗口大小固定，带滚动条</p>
  </div>
</NewWindow>

4. 注意事项 #

• 新窗口的显示必须由用户触发（比如点击事件），否则会被浏览器弹窗拦截机制阻止
• 新窗口和主窗口共享React上下文，可正常使用全局状态（如Context、Redux）
• 若需渲染原始HTML字符串，可使用dangerouslySetInnerHTML属性

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