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

Question

假设我有一个名为 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 中应该有一种通用的使用方法，使该代码片段可跨组件重用。

Answer 1

你可以考虑一个更奇特的解决方案，但 propTypes 实际上只是一个对象，如果你把它变成一个接收两个参数的函数会怎么样 image 和 text 和 return 一个对象，所以你可以在你的组件中导入它：

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

在你的组件中：

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

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

How to make reusable proptype validations?

javascript

code-reuse

reusability

reactjs

react-proptypes