年年有"余"

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1700|回复: 0

[React] 第四讲 React组件props中children的基本使用

[复制链接]
  • TA的每日心情
    奋斗
    2022-12-13 21:26
  • 签到天数: 371 天

    [LV.9]以坛为家II

    发表于 2017-12-25 15:33:21 | 显示全部楼层 |阅读模式
    1、第三讲中简单描述了React中props的基本使用,通过this.props.xxx即可以取到组件中xxx属性的值;
    2、在this.props中的众多属性中,有一个叫“children”的属性比较特殊,该属性可以取到组件中子节点的集合;
    3、通过React.Children.map()方法来遍历集合;
    4、以实例来说明问题;
    4.1、常规形态,在id为container的标签内部加入一个<div>,内部一个<h1>和<a>;
    [JavaScript] 纯文本查看 复制代码
        ReactDOM.render(
          (
            <div>
            <h1>sian</h1>
            <a href="http://www.yusian.com">[url=http://www.yusian.com]www.yusian.com[/url]</a>
            </div>
          ),
          document.getElementById("container")
        );

    4.2、如果不是<div>,而是自定义的一个<showWeb>呢?显示的结果是怎样?
    [JavaScript] 纯文本查看 复制代码
        ReactDOM.render(
          (
            <ShowWeb>
            <h1>sian</h1>
            <a href="http://www.yusian.com">[url=http://www.yusian.com]www.yusian.com[/url]</a>
            </ShowWeb>
          ),
          document.getElementById("container")
        );

    4.3、自定义<ShowWeb>组件的结构是这样的,说明在注释中
    [JavaScript] 纯文本查看 复制代码
        var ShowWeb = React.createClass({
          render:function(){
            return (
              <ol>
              {
                /**
                 * 获取组件<ShowWeb>的内部元素
                 1、使用React.Children.map()进行元素遍历;
                 2、该方法需要传入两个参数,第一个参数为需要遍历的数组,第二个参数为匿名函数;
                 2.1、this.props.xxx为组件的属性取值方式,获取组件的某个属性值通过该方式;
                 2.2、this.props.children是一个特殊属性,该属性取出的不是组件的某个属性,而是元素集合;
                 3、该方法的第二个参数为一个匿名函数,函数参数为遍历到的元素,返回值为处理过的数据;
                 4、通过该方式处理组件中的子元素
                 */
                React.Children.map(this.props.children, function(child){
                  // 遍历各元素需要执行的操作
                  return <li>{child}</li>;
                })
              }
              </ol>
            );
          }
        });

    5、效果链接:www.yusian.com/react/props/children.html
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    手机版|小黑屋|Archiver|iOS开发笔记 ( 湘ICP备14010846号 )

    GMT+8, 2024-3-29 23:48 , Processed in 0.051538 second(s), 18 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表