从组件中提取 proptypes、isRequired 和 defaultProps

Question

赏金将在 7 天后到期。 此问题的答案有资格获得+50声望赏金。 otto想引起更多人对这个问题的关注。

我有以下组件：

import React from 'react'
import PropTypes from 'prop-types'

const MyComponent = ({ text1, text2 }) => {
    return (
        <div>
            <p>{text1}</p>
            <p>{text2}</p>
        </div>
    )
}
MyComponent.propTypes = {
    text1: PropTypes.string,
    text2: PropTypes.string,
}
MyComponent.defaultPropTypes = {
    text1: 'React',
    text2: 'is cool',
}

export default MyComponent

然后我像这样导入它

import MyComponent from "./MyComponent";

console.log(MyComponent.propTypes)

这将打印一个 object，所有 propNames 为 function。 我无法从 object 中获取类型。 如何从此组件中获取 proptype（在此示例字符串中）和“isRequired”？ 我想用它来自动渲染一个包含所有可能的 propNames + PropType + isRequired + defaultPropType 的表

Answer 1

您无法通过读取 propType 属性来检索您要查找的信息。 propTypes 中的每个项目实际上是一个验证包装器 function，它掩盖了实际的类型验证。

有一种方法可以实现您正在寻找的东西，但它并不是特别漂亮。 看到这个答案。

您的方案的另一个选项是使用包含所需信息的组件创建和导出另一个 static 属性。 然后创建一个实用方法将您的属性数据 map 转换为 PropTypes

例如：

// -- utility

const validators = {
    string: PropTypes.string,
    string_required: PropTypes.string.isRequired,
}

const getPropTypesFromValidators = (o) => {
    return Object.entries(MyComponent.validators).reduce((acc, [field, validatorKey]) => {
        return { ...acc, [field]: validators[validatorKey] }
    }, {})
}


/// --- component

const MyComponent = ({ text1, text2 }) => {
    return (
        <div>
            <p>{text1}</p>
            <p>{text2}</p>
        </div>
    )
}
MyComponent.validators = {
    text1: 'string',
    text2: 'string_required',
}

MyComponent.propTypes = getPropTypesFromValidators(MyComponent.validators);

MyComponent.defaultPropTypes = {
    text1: 'React',
    text2: 'is cool',
}

// -- app

console.log(MyComponent.validators);

第二种选择可能是包装 PropTypes object 并添加您自己的注释，例如：

const AnnotatedPropTypes = Object.keys(PropTypes).reduce((acc, key) => {
  const fn = (...args) => PropTypes[key](...args);
  fn.description = key;

  if (typeof PropTypes[key].isRequired === "function") {
    fn.isRequired = (...args) => PropTypes[key].isRequired(...args);
    fn.isRequired.description = `${key} (required)`;
  }

  return { ...acc, [key]: fn };
}, {});

// ---- component

...

MyComponent.propTypes = {
  text1: AnnotatedPropTypes.string,
  text2: AnnotatedPropTypes.string.isRequired,
};


console.log(MyComponent.propTypes.text1.description)

（上面的 AnnotatedPropTypes object 只是一个示例，可能并未涵盖所有用例）