Question

我正在开发一个带有React组件的通用npm软件包，以供以后在多个项目中使用。我有默认的快餐栏组件和一个包装器组件，这些组件将根据提供给包装器道具的快餐栏的类型返回特定的快餐栏。这是我的快餐包装纸的代码：

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包装器，所以除了默认的快餐栏类型之外，该包装器还将具有特定于每个项目的快餐栏类型的信息？

Answer 1

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

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，这只会呈现您的项目道具中带有userDefinedType的常见CustomSnackbars。

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} />
)

通过功能更改重用React组件

1 个答案: