如何让React通用NPM包的CustomSnackbars组件支持项目自定义类型扩展

你可以通过几种不同的方式实现这个需求，每种方式适用于不同的场景，下面是最常用的三个方案：

方案1：通过props传入自定义类型（灵活局部扩展） #

修改通用包中的CustomSnackbars组件，让它接受一个customTypes属性，将默认类型和自定义类型合并。这样项目可以在需要的地方传入自己的类型映射：

通用包代码修改： #

// 导出默认类型，方便项目参考或复用
export const DEFAULT_SNACKBAR_TYPES = { 
  [SNACKBAR_TYPES.SUCCESS]: SnackbarSuccess, 
  [SNACKBAR_TYPES.ERROR]: SnackbarError, 
  [SNACKBAR_TYPES.INFO]: SnackbarInfo, 
  [SNACKBAR_TYPES.LOADING]: SnackbarLoading 
} 

const CustomSnackbars = ({ customTypes, ...props }) => { 
  // 合并默认类型与自定义类型，自定义类型会覆盖同名默认类型
  const mergedTypes = { ...DEFAULT_SNACKBAR_TYPES, ...customTypes }
  const CustomSnackbar = mergedTypes[props.snackbarType] 

  if (!CustomSnackbar) { 
    console.warn('Invalid snackbar type was provided') // 用warn比log更醒目
    return null 
  } 

  return <CustomSnackbar {...props} /> 
}

export default CustomSnackbars

项目中使用： #

// 项目自定义的Snackbar组件和类型
import { SnackbarWarning, CustomPromoSnackbar } from './project-snackbars'

const PROJECT_SNACKBAR_TYPES = {
  WARNING: SnackbarWarning,
  PROMO: CustomPromoSnackbar
}

// 直接在使用时传入自定义类型
<CustomSnackbars 
  snackbarType="WARNING" 
  customTypes={PROJECT_SNACKBAR_TYPES}
  message="请检查您的输入格式"
/>

如果项目中大部分场景都使用同一套自定义类型，可以封装一个项目专属的组件：

// 项目中封装统一的CustomSnackbars
import CustomSnackbars from 'your-npm-package'

export const ProjectSnackbars = (props) => {
  return <CustomSnackbars 
    customTypes={PROJECT_SNACKBAR_TYPES} 
    {...props} 
  />
}

// 之后项目里统一使用这个封装后的组件
<ProjectSnackbars snackbarType="PROMO" message="新用户专享优惠" />

优点：灵活，支持局部场景使用不同的自定义类型；缺点：如果全局使用同一套类型，会有重复代码，需要额外封装。

方案2：提供工厂函数创建项目专属组件（全局统一扩展） #

在通用包中导出一个工厂函数，让项目一次性合并默认类型和自定义类型，生成自己的CustomSnackbars组件：

通用包代码修改： #

export const DEFAULT_SNACKBAR_TYPES = { 
  [SNACKBAR_TYPES.SUCCESS]: SnackbarSuccess, 
  [SNACKBAR_TYPES.ERROR]: SnackbarError, 
  [SNACKBAR_TYPES.INFO]: SnackbarInfo, 
  [SNACKBAR_TYPES.LOADING]: SnackbarLoading 
} 

// 工厂函数，接收自定义类型，返回合并后的组件
export const createCustomSnackbars = (customTypes = {}) => {
  const mergedTypes = { ...DEFAULT_SNACKBAR_TYPES, ...customTypes }

  return (props) => {
    const CustomSnackbar = mergedTypes[props.snackbarType]
    if (!CustomSnackbar) {
      console.warn('Invalid snackbar type was provided')
      return null
    }
    return <CustomSnackbar {...props} />
  }
}

// 保留默认的CustomSnackbars组件
export const CustomSnackbars = createCustomSnackbars()

项目中使用： #

import { createCustomSnackbars } from 'your-npm-package'
import { SnackbarWarning, CustomPromoSnackbar } from './project-snackbars'

// 创建项目专属的Snackbar组件
const ProjectSnackbars = createCustomSnackbars({
  WARNING: SnackbarWarning,
  PROMO: CustomPromoSnackbar
})

// 项目中直接使用这个组件
<ProjectSnackbars snackbarType="WARNING" message="请检查您的输入格式" />

优点：一次性配置，全局使用统一组件，代码简洁；缺点：无法局部灵活切换不同的自定义类型（除非创建多个工厂实例）。

方案3：使用React Context实现全局类型注入（全局无感扩展） #

如果希望项目中所有CustomSnackbars自动使用自定义类型，无需手动传参，可以用React Context实现全局注入：

通用包代码修改： #

import { createContext, useContext } from 'react'

export const DEFAULT_SNACKBAR_TYPES = { 
  [SNACKBAR_TYPES.SUCCESS]: SnackbarSuccess, 
  [SNACKBAR_TYPES.ERROR]: SnackbarError, 
  [SNACKBAR_TYPES.INFO]: SnackbarInfo, 
  [SNACKBAR_TYPES.LOADING]: SnackbarLoading 
} 

// 创建Context
const SnackbarTypesContext = createContext({})

// 导出Provider组件，供项目顶层包裹
export const SnackbarTypesProvider = ({ children, customTypes }) => {
  return (
    <SnackbarTypesContext.Provider value={customTypes}>
      {children}
    </SnackbarTypesContext.Provider>
  )
}

// 修改CustomSnackbars组件，从Context获取自定义类型
export const CustomSnackbars = (props) => {
  const customTypes = useContext(SnackbarTypesContext)
  const mergedTypes = { ...DEFAULT_SNACKBAR_TYPES, ...customTypes }

  const CustomSnackbar = mergedTypes[props.snackbarType]
  if (!CustomSnackbar) {
    console.warn('Invalid snackbar type was provided')
    return null
  }
  return <CustomSnackbar {...props} />
}

项目中使用： #

import { SnackbarTypesProvider, CustomSnackbars } from 'your-npm-package'
import { SnackbarWarning, CustomPromoSnackbar } from './project-snackbars'

// 在项目顶层组件（如App.js）中包裹Provider
function App() {
  const customTypes = {
    WARNING: SnackbarWarning,
    PROMO: CustomPromoSnackbar
  }

  return (
    <SnackbarTypesProvider customTypes={customTypes}>
      {/* 项目的所有子组件 */}
      <SomeChildComponent />
    </SnackbarTypesProvider>
  )
}

// 在任意子组件中直接使用CustomSnackbars，无需传customTypes
function SomeChildComponent() {
  return (
    <CustomSnackbars 
      snackbarType="PROMO" 
      message="新用户专享优惠"
    />
  )
}

优点：全局自动注入，无需在每个组件传参，代码最简洁；缺点：无法局部灵活切换类型（除非嵌套多个Provider）。

额外建议 #

• 可以在通用包的文档中明确说明这些扩展方式，以及自定义类型与默认类型的覆盖规则；
• 如果不希望项目覆盖默认类型，可以调整合并顺序为{ ...customTypes, ...DEFAULT_SNACKBAR_TYPES }，这样默认类型会优先保留；
• 建议用console.warn代替console.log，让无效类型的提示更醒目。

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