React.Children详解
React Children是顶层API之一；this.props.的对象属性和组件属性是一一对应的，但是有一个例外，this.props.children是组件所有的子节点
React.Children.map
- object React.Children.map(object children, function fn [, object context])
*在每个直接子级调用fn函数，此处的this指的是上下文，若children是一个内嵌的数组或者对象，它将被遍历：不会传入容器对象到 fn 中。如果 children 参数是 null 或者 undefined，那么返回 null 或者 undefined 而不是一个空对象。另外，this.props.Childern的值有三种可能：a若此组件没有子节点就是undefined;b若此组件有一个子节点则数据类型：object；若此组件有多个子节点，数据类型就是Array
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
class MyList extends React.Component {
render() {
return (<ul>{
React.Children.map(this.props.children, function(child){
console.log(child) // MyList里面有节点，对这三个节点进行循环
return <li>child</li>;
})
}</ul>);
}
}
ReactDOM.render(
<MyList>
<span>飞剑侠</span>
<span>武尊神</span>
<span>逆天魔</span>
</MyList>
,document.getElementById('example'));
</script>
</body>
</html>
React.Children.forEach
- React.Children.forEach(object children, function fn [, object context])
- 遍历子元素，对每一个子元素执行回调，但不像上述的 map 那样最终返回一个新的集合
- 类似于 React.Children.map()，但是不返回对象。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
class ToList extends React.Component {
render() {
return (<ul>{
React.Children.forEach(this.props.children, function(child){ //无返回值，要是想封装，需要自己创建array
console.log(child.props, child.key)
})
}</ul>);
}
}
ReactDOM.render(
<ToList>
<li key="test1">飞剑侠</li>
<li key="test2">武尊神</li>
<li key="test3">逆天魔</li>
</ToList>
,document.getElementById('example'));
</script>
</body>
</html>
React.Children.count
- React.Children.count(object children)
- 返回子元素的总和
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
class ToList extends React.Component {
render() {
console.log(this.props)
const count = React.Children.count(this.props.children)
return (<ul>
<li>一共有{count}个子元素</li>
{this.props.children}
</ul>);
}
}
ReactDOM.render(
<ToList>
<li>飞剑侠</li>
<li>武尊神</li>
<li>逆天魔</li>
</ToList>
,document.getElementById('example'));
</script>
</body>
</html>
React.Children.only
- object React.Children.only(object children)
- 返回 children 中 仅有的子级。否则抛出异常。
- 这里仅有的子级，only方法接受的参数只能是一个对象，不能是多个对象（数组）。
console.log(React.Children.only(this.props.children[0]));
//输出对象this.props.children[0]
this.props.children
- 上例子中打印的是this.props,this.props.children就是取出dom元素，这点很关键(自己理解)