Tengo el siguiente componente:
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 MyComponenty luego lo estoy importando así
import MyComponent from "./MyComponent"; console.log(MyComponent.propTypes)Esto imprime un objeto con todos los propNames como una función. No puedo obtener el tipo del objeto. ¿Cómo obtengo el tipo de propiedad (en esta cadena de ejemplo) y "isRequired" de este componente? Quiero usarlo para representar automáticamente una tabla con todos los propNames posibles + PropType + isRequired + defaultPropType
No puede recuperar la información que está buscando leyendo las propiedades propType. Cada elemento de propTypes es en realidad una función contenedora de validación que oscurece la validación de tipo real.
Hay una manera de lograr lo que buscas, pero no es particularmente bonita. Ver esta respuesta .
Otra opción para su escenario es crear y exportar otra propiedad estática con su componente que incluya la información que necesita. Luego cree un método de utilidad para mapear los datos de su propiedad en PropTypes
Por ejemplo:
// -- 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);Una segunda opción podría ser envolver el objeto PropTypes y agregar sus propias anotaciones, por ejemplo:
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)(El objeto AnnotatedPropTypes anterior es solo un ejemplo y probablemente no cubre todos los casos de uso)