Dat-o simplă componentă care face copiii săi:
class ContainerComponent extends Component {
static propTypes = {
children: PropTypes.object.isRequired,
}
render() {
return (
<div>
{this.props.children}
</div>
);
}
}
export default ContainerComponent;
Întrebare: Ce ar trebui să propType de copii prop fi?
Când am setat-o ca pe un obiect, acesta nu reușește atunci când se folosesc componente cu mai mulți copii:
<ContainerComponent>
<div>1</div>
<div>2</div>
</ContainerComponent>
Avertisment: nu a Reușit prop tip: Invalid prop "copii" de tip "matrice" furnizate
ContainerComponent
, de așteptat "obiect".
Dacă am stabilit ca o matrice, acesta va eșua dacă I-l dau doar un singur copil, și anume:
<ContainerComponent>
<div>1</div>
</ContainerComponent>
Avertisment: nu a Reușit prop tip: Invalid prop copii de tip obiect furnizate ContainerComponent, de așteptat matrice.
Vă rugăm să consilieze, să nu te obosi face un propTypes verificați pentru copii elemente?
Incearca ceva de genul asta folosind oneOfType " sau " PropTypes.nod
import PropTypes from 'prop-types'
...
static propTypes = {
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node
]).isRequired
}
sau
static propTypes = {
children: PropTypes.node.isRequired,
}
Pentru mine depinde de componenta. Dacă știți ceea ce aveți nevoie pentru a fi populate cu atunci ar trebui să încercați pentru a specifica exclusiv, sau mai multe tipuri, folosind:
PropTypes.oneOfType
Cu toate acestea am găsi cea mai mare parte, cu mai multe componente generice care pot avea mai multe tipuri de copii, am'm fericit de a utiliza:
PropTypes.any
Dacă doriți să se refere la un Reacționa componentă apoi veți fi în căutarea pentru
PropTypes.element
Deși,
PropTypes.node
descrie ceva care poate fi redat - siruri de caractere, numere, elemente sau o matrice de aceste lucruri. Dacă acest lucru vi se potriveste, atunci aceasta este calea.
La PropTypes documentația are următoarele
// Anything that can be rendered: numbers, strings, elements or an array
// (or fragment) containing these types.
optionalNode: PropTypes.node,
Deci, puteți folosi PropTypes.nod` pentru a verifica pentru obiecte sau tablouri de obiecte
static propTypes = {
children: PropTypes.node.isRequired,
}
Răspunsurile aici don't par a acoperi destul de verificare copiii exact. nod
și "obiect" sunt prea permisive, am vrut să văd exact element. Aici este ceea ce am încheiat cu:
sunt
pentru copil element de sineÎn cele din urmă, ceva de genul asta:
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
Această problemă a ajutat să-mi dau seama mai clar: https://github.com/facebook/react/issues/2979
Dacă doriți pentru a se potrivi exact un tip de componentă, a verifica acest lucru
MenuPrimary.propTypes = {
children: PropTypes.oneOfType([
PropTypes.arrayOf(MenuPrimaryItem),
PropTypes.objectOf(MenuPrimaryItem)
])
}
Dacă doriți pentru a se potrivi exact unele tipuri de componente, verificați acest lucru
const HeaderTypes = [
PropTypes.objectOf(MenuPrimary),
PropTypes.objectOf(UserInfo)
]
Header.propTypes = {
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.oneOfType([...HeaderTypes])),
...HeaderTypes
])
}
Incearca un custom propTypes :
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
}
[Vioara](
)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 />
Exemplu:
import React from 'react';
import PropTypes from 'prop-types';
class MenuItem extends React.Component {
render() {
return (
<li>
<a href={this.props.href}>{this.props.children}</a>
</li>
);
}
}
MenuItem.defaultProps = {
href: "/",
children: "Main page"
};
MenuItem.propTypes = {
href: PropTypes.string.isRequired,
children: PropTypes.string.isRequired
};
export default MenuItem;
Imagine: vă Arată eroare în consolă, dacă temperatura este de tip diferit