发布依赖react-query的包时如何避免React重复安装？

1. 把React、ReactDOM设为peerDependencies #

这是核心解决方案：peerDependencies会告知包管理器，你的组件包依赖的React版本由宿主项目提供，不会单独安装独立版本，从根源上保证包与项目使用完全一致的React版本，避免冲突。

在你的包的package.json中配置：

{
  "peerDependencies": {
    "react": ">=17.0.0 <19.0.0",
    "react-dom": ">=17.0.0 <19.0.0",
    "react-query": ">=3.0.0" // 根据你实际使用的react-query版本调整兼容范围
  },
  "devDependencies": {
    "react": "^18.2.0", // 本地开发测试用的固定版本
    "react-dom": "^18.2.0",
    "react-query": "^3.39.3"
  }
}

注意：绝对不要把React/ReactDOM放在dependencies里，否则会强制安装独立版本，直接引发版本冲突。

2. 适配react-query的依赖兼容 #

react-query本身依赖React，需确保指定的版本范围能同时兼容React 17和18。比如react-query 3.x系列对两个版本都支持，设置>=3.0.0即可；若后续升级react-query，要先确认它的React兼容范围再调整配置。

3. 处理React 17/18的类型差异 #

针对两个版本的类型变更（比如React.FC不再隐式包含children属性），可以做这些调整：

• 显式定义组件props中的children，不依赖React.FC的隐式类型：

import React from 'react';

interface MyComponentProps {
  children?: React.ReactNode;
  // 其他组件属性
}

export const MyComponent = ({ children }: MyComponentProps) => {
  // 组件逻辑
  return <div>{children}</div>;
};

• 若需要更精细的类型兼容，可用TypeScript条件类型区分React版本：

import type { ReactNode } from 'react';

type PropsWithChildren<P = {}> = P & { children?: ReactNode };

4. 本地验证兼容性 #

为确保包在React 17和18环境下都能正常工作，可以：

• 创建两个测试项目，分别安装React 17和18
• 使用yalc工具将本地组件包链接到测试项目，模拟真实安装场景
• 运行测试用例，检查组件渲染、react-query功能是否正常

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