Gegeben eine einfache Komponente, die ihre Kinder rendert:
class ContainerComponent extends Component {
static propTypes = {
children: PropTypes.object.isRequired,
}
render() {
return (
<div>
{this.props.children}
</div>
);
}
}
export default ContainerComponent;
Frage: Was sollte der propType der Kinder-Prop sein?
Wenn ich es als Objekt einstelle, schlägt es fehl, wenn ich die Komponente mit mehreren Kindern verwende:
<ContainerComponent>
<div>1</div>
<div>2</div>
</ContainerComponent>
Warnung: Failed prop type: Ungültige Requisite
children
vom Typarray
übergeben anContainerComponent
, erwartet wurdeobject
.
Wenn ich es als Array einstelle, wird es fehlschlagen, wenn ich ihm nur ein Kind gebe, d.h.:
<ContainerComponent>
<div>1</div>
</ContainerComponent>
Warnung: Failed prop type: Ungültige Prop-Kinder vom Typ Objekt an ContainerComponent übergeben, erwartetes Array.
Bitte beraten Sie, sollte ich nur nicht die Mühe tun, eine propTypes Überprüfung für Kinder Elemente?
Versuchen Sie etwas wie dies unter Verwendung von oneOfType
oder PropTypes.node
import PropTypes from 'prop-types'
...
static propTypes = {
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node
]).isRequired
}
oder
static propTypes = {
children: PropTypes.node.isRequired,
}
Für mich hängt das von der Komponente ab. Wenn Sie wissen, was Sie brauchen, um es mit dann sollten Sie versuchen, ausschließlich angeben, oder mehrere Arten mit:
PropTypes.oneOfType
Bei allgemeineren Komponenten, die viele Arten von Kindern haben können, bin ich jedoch meist froh, wenn ich sie verwenden kann:
PropTypes.any
Wenn Sie auf eine React-Komponente verweisen wollen, dann suchen Sie nach
PropTypes.element
Obwohl,
PropTypes.node
alles beschreibt, was gerendert werden kann - Zeichenketten, Zahlen, Elemente oder ein Array aus diesen Dingen. Wenn das für Sie passt, dann ist das der richtige Weg.
Versuchen Sie eine benutzerdefinierte 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
}
[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 />