React.Children详解

最新推荐文章于 2024-02-02 16:01:03 发布

醉小义

最新推荐文章于 2024-02-02 16:01:03 发布

阅读量2.3k

点赞数 1

分类专栏： Fusion Design 文章标签： react.Children

Fusion Design 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

React Children是顶层API之一；this.props.的对象属性和组件属性是一一对应的，但是有一个例外，this.props.children是组件所有的子节点

map
forEach
count
only
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元素，这点很关键(自己理解)

参考

醉小义

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
React.Children详解

React Children是顶层API之一；this.props.的对象属性和组件属性是一一对应的，但是有一个例外，this.props.children是组件所有的子节点React.Children.mapobject React.Children.map(object children, function fn [, object context])*在每个直接子级调用fn函数，此处...
复制链接

扫一扫