reactjs - proptypes - react/forbid-prop-types

ReactJs: ¿Cuáles deberían ser los PropTypes para this.props.children?

Question

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 del prop de los niños?

Cuando lo configuro como un objeto, falla cuando uso el componente con varios hijos:

<ContainerComponent>
<div>1</div>
<div>2</div>
</ContainerComponent>

Advertencia: Tipo de utilería fallido: children de utilería no válidos de tipo array suministrados a ContainerComponent , object esperado.

Si lo configuro como una matriz, fallará si le doy solo un hijo, es decir:

<ContainerComponent>
<div>1</div>
</ContainerComponent>

Advertencia: Tipo de utilería fallido: hijos de utilería no válidos del tipo de objeto suministrado a ContainerComponent, matriz esperada.

Por favor avise, ¿no debería molestarme en hacer una verificación de propTypes para elementos secundarios?

Answer 1

Las respuestas aquí no parecen abarcar la verificación exacta de los niños. node y object son demasiado permisivos, quería verificar el elemento exacto. Esto es lo que terminé usando:

• Use oneOfType([]) para permitir un solo o conjunto de hijos
• Utilice shape y arrayOf(shape({})) para elementos individuales y conjuntos de elementos arrayOf(shape({})) , respectivamente
• Use oneOf para el elemento secundario en sí

Al final, algo como esto:

import PropTypes from ''prop-types''
import MyComponent from ''./MyComponent''
children: PropTypes.oneOfType([
PropTypes.shape({
type: PropTypes.oneOf([MyComponent]),
}),
PropTypes.arrayOf(
PropTypes.shape({
type: PropTypes.oneOf([MyComponent]),
})
),
]).isRequired

Este problema me ayudó a resolver esto más claramente: https://github.com/facebook/react/issues/2979

Answer 2

Para mí depende del componente. Si sabe con qué necesita que se rellene, debe intentar especificar exclusivamente o varios tipos utilizando:

PropTypes.oneOfType 

Sin embargo, encuentro que, con componentes más genéricos que pueden tener muchos tipos de hijos, estoy feliz de usar:

PropTypes.any

Si desea hacer referencia a un componente Reaccionar, entonces estará buscando

PropTypes.element

A pesar de que,

PropTypes.node

describe todo lo que se puede representar: cadenas, números, elementos o una matriz de estas cosas. Si esto te conviene, este es el camino.

Answer 3

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,
}

Answer 4

Pruebe un propTypes personalizado:

 const childrenPropTypeLogic = (props, propName, componentName) => {
const prop = props[propName];
return React.Children
.toArray(prop)
.find(child => child.type !== ''div'') && new Error(`${componentName} only accepts "div" elements`);
};
static propTypes = {
children : childrenPropTypeLogic
}

Fiddle

const {Component, PropTypes} = React;
const childrenPropTypeLogic = (props, propName, componentName) => {
var error;
var prop = props[propName];
React.Children.forEach(prop, function (child) {
if (child.type !== ''div'') {
error = new Error(
''`'' + componentName + ''` only accepts children of type `div`.''
);
}
});
return error;
};
class ContainerComponent extends Component {
static propTypes = {
children: childrenPropTypeLogic,
}
render() {
return (
<div>
{this.props.children}
</div>
);
}
}
class App extends Component {
render(){
return (
<ContainerComponent>
<div>1</div>
<div>2</div>
</ContainerComponent>
)
}
}
ReactDOM.render(<App /> , document.querySelector(''section''))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<section />

Answer 5

Si desea hacer coincidir exactamente un tipo de componente, marque esto

MenuPrimary.propTypes = {
children: PropTypes.oneOfType([
PropTypes.arrayOf(MenuPrimaryItem),
PropTypes.objectOf(MenuPrimaryItem)
])
}

Si desea hacer coincidir exactamente algunos tipos de componentes, marque esto

const HeaderTypes = [
PropTypes.objectOf(MenuPrimary),
PropTypes.objectOf(UserInfo)
]
Header.propTypes = {
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.oneOfType([...HeaderTypes])),
...HeaderTypes
])
}

Answer 6

La 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,

Por lo tanto, puede usar PropTypes.node para buscar objetos o matrices de objetos

static propTypes = {
children: PropTypes.node.isRequired,
}