时间戳

首页 > 解决方案 > 如何进行可重用的 proptype 验证？

javascript - 如何进行可重用的 proptype 验证？

问题描述

假设我有一个名为的父组件Logo，它分别包含两个子组件Image和Text. 下面的代码显示了我如何验证父组件的道具。

Logo.propTypes = {
  type: PropTypes.string,
  children: PropTypes.oneOfType([
    PropTypes.shape({
      type: PropTypes.oneOf([Image, Text])
    }),
    PropTypes.arrayOf(
      PropTypes.shape({
        type: PropTypes.oneOf([Image, Text])
      })
    )
  ])
};

这工作正常，做我真正想要的。
但是我有很多其他组件，我做同样的子验证螺母只是变化是PropTypes.oneOf([Image, Text])数组。所以，在那种情况下，我认为应该有一种在 javascript/react 中使用它的通用方法，使这个代码片段可以在组件之间重用。

标签： javascriptreactjsreusabilitycode-reusereact-proptypes

解决方案

你可以考虑一个更高级的解决方案，但propTypes它实际上只是一个对象，如果你把它变成一个接收两个参数image并text返回一个对象的函数，那么你可以将它导入到你的组件中：

export const myPropTypesCreator = (image, text) =>({/*return the object*/})

在您的组件内部：

import { myPropTypesCreator } from './mypath'
Logo.propTypes = myPropTypesCreator(image,text)

推荐阅读