React教程之子组件的Props的类型
通常情况下，React的组件的子组件是一组，也就是说子组件是一个数组。看下面的例子
var GenericWrapper = React.createClass({
componentDidMount: function() {
console.log(Array.isArray(this.props.children)); // => true
},
render: function() {
return <div />;
}
});
ReactDOM.render(
<GenericWrapper><span/><span/><span/></GenericWrapper>,
document.getElementById('content')
);
组件GenericWrapper有三个子组件，所以上述例子运行结果会在控制台打印出true。
虽说其子组件是一个数组，然而如果其子组件只有一个组件的情况，并不是说数组中只有一个元素，而是说this.props.children不是一个数组。或者说只有其本身，没有子组件的情况也不是一个空数组，this.props.children本身就不是一个数组。
var GenericWrapper = React.createClass({
componentDidMount: function() {
console.log(Array.isArray(this.props.children)); // => false
},
render: function() {
return <div />;
}
});
ReactDOM.render(
<GenericWrapper><span/></GenericWrapper>,
document.getElementById('content')
);
也就是说，上面的结果是会在控制台输出false。
但是，这里有一点需要注意：我们这里说的是组件的子组件，而并不是子元素。我们可以通过this.props.children获得子组件，但是并不能获得子元素。
var GenericWrapper = React.createClass({
componentDidMount: function() {
console.log(Array.isArray(this.props.children)); // => false
},
render: function() {
return <div><span/><span/></div>;
}
});
ReactDOM.render(
<GenericWrapper></GenericWrapper>,
document.getElementById('content')
);
这里在控制台打印出来的就是false。因为在本例中span是div的子元素，对于组件GenericWrapper它并没有子组件。所以说this.props.children不是一个数组。
对于组件没有子组件的情况，this.props.children为undefined。
var GenericWrapper = React.createClass({
componentDidMount: function() {
console.log(this.props.children); // => undefined
},
render: function() {
return <div><span/><span/></div>;
}
});
ReactDOM.render(
<GenericWrapper></GenericWrapper>,
document.getElementById('content')
);
控制台打印出来的结果就是undefined。
本篇内容比较简单，希望对大家有所帮助。
本文转载自：迹忆客（https://www.jiyik.com）
以上是 React教程之子组件的Props的类型 的全部内容， 来源链接： utcz.com/z/290091.html
