时间戳

首页 > 解决方案 > 通过功能更改重用反应组件

reactjs - 通过功能更改重用反应组件

问题描述

我正在开发一个带有 React 组件的通用 npm 包，以供以后在多个项目中使用。我有默认的snackbar 组件和一个包装器组件，它们将根据提供给包装器道具的snackbar 类型返回某个snackbar。这是我的小吃店包装器的代码：

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

const CustomSnackbars = props => {
  const CustomSnackbar = TYPES[props.snackbarType]

  if (!CustomSnackbar) {
    console.log('Invalid snackbar type was provided')
    return null
  }

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

此包装器将用于创建CustomSnackbars容器的项目中。但是这里有一个问题，每个项目可能都会用自己的小吃店类型定义自己的小吃店。而且我不想将我以后在项目中使用的每个快餐栏都放在我的公共模块中。是否有可能以某种方式CustomSnackbars从每个项目的一侧扩展包装器，所以除了默认的小吃店类型之外，这个包装器还将特定于每个项目的小吃店类型？

标签： reactjs

解决方案

尝试通过道具传递您的其他类型：

CustomSnackbars.js（在公共库中）

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

const CustomSnackbars = props => {
  const enhancedTypes = {...TYPES, ...props.userDefinedTypes};
  const CustomSnackbar = enhancedTypes[props.snackbarType]

  if (!CustomSnackbar) {
    console.log('Invalid snackbar type was provided')
    return null
  }

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

此外，如果您不想在消费者项目userDefinedTypes的每个实例中将这些传递给道具CustomSnackbars，您可以创建项目特定CustomSnackbars的，这只会CustomSnackbars在道具中使用 userDefinedTypes 呈现您的共同点。

ProjectSpecificCustomSnackbars.js（在您的项目中）

const PROJECT_SPECIFIC_TYPES = {
  [SNACKBAR_TYPES.PROJECT_SUCCESS]: SnackbarProjectSuccess,
  [SNACKBAR_TYPES.PROJECT_INFO]: SnackbarProjectInfo
}

const ProjectSpecificCustomSnackbars = props => (
  <CustomSnackbars {...props} userDefinedTypes={PROJECT_SPECIFIC_TYPES} />
)

推荐阅读