Dado un componente simple que representa a sus hijos:
class ContainerComponent extends Component { static propTypes = { children: PropTypes.object.isRequired, } render() { return ( <div> {this.props.children} </div> ); } } export default ContainerComponent;Pregunta: ¿Cuál debería ser el propType de los accesorios para niños?
Cuando lo configuro como un objeto, falla cuando uso el componente con varios niños:
<ContainerComponent> <div>1</div> <div>2</div> </ContainerComponent>Advertencia: tipo de prop fallido:
childrende prop no válidos del tipoarrayproporcionado aContainerComponent,objectesperado .
Si lo configuro como una matriz, fallará si le doy solo un hijo, es decir:
<ContainerComponent> <div>1</div> </ContainerComponent>Advertencia: tipo de prop fallido: hijos de prop no válidos del tipo de objeto proporcionado a ContainerComponent, matriz esperada.
Por favor, avise, ¿no debería molestarme en hacer una verificación de propTypes para elementos secundarios?
Pruebe algo como esto utilizando oneOfType o PropTypes.node
import PropTypes from 'prop-types' ... static propTypes = { children: PropTypes.oneOfType([ PropTypes.arrayOf(PropTypes.node), PropTypes.node ]).isRequired }o
static propTypes = { children: PropTypes.node.isRequired, }Para mí depende del componente. Si sabe con qué necesita que se complete, debe intentar especificar tipos exclusivos o múltiples usando:
PropTypes.oneOfTypeSi desea referirse a un componente React, entonces estará buscando
PropTypes.elementAunque,
PropTypes.nodedescribe cualquier cosa que se pueda representar: cadenas, números, elementos o una variedad de estas cosas. Si esto te conviene, entonces este es el camino.
Con componentes muy genéricos, que pueden tener muchos tipos de hijos, también puedes usar los siguientes. Sin embargo, no lo recomendaría. Como se menciona en los comentarios a continuación, de alguna manera anula el uso de PropTypes y, por lo general, hay otras formas de especificar lo que requiere su componente. También tenga en cuenta que eslint y ts pueden (probablemente) no estar contentos con esta falta de especificidad:
PropTypes.anyLa documentación de PropTypes tiene lo siguiente
// Anything that can be rendered: numbers, strings, elements or an array // (or fragment) containing these types. optionalNode: PropTypes.node, Entonces, puede usar PropTypes.node para buscar objetos o matrices de objetos
static propTypes = { children: PropTypes.node.isRequired, }