在ReactDOM.render里面我们写我们的自定义组件的时候有时需要加一下子元素进去：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div id="app"></div>

    <script src="common/react.js"></script>

    <script src="common/react-dom.js"></script>

    <script src="https://cdn.bootcss.com/babel-core/5.8.38/browser.js"></script>

    <script type="text/babel">

       class App extends React.Component {

           render() {

               return <div>

                    {/*props.children获取下面4个子节点:3个元素节点和1个文字节点*/}

                    {this.props.children.map((item,index)=> <p key={index}>{item}</p>)}

               </div>

           }

       }

       ReactDOM.render(

           <App>

                {/*加一些子元素*/}

                <span>rick</span>

                <span>zhangamie</span>

                <span>react</span>

                2132132

           </App>,

           document.getElementById('app')

       )

    </script>

</body>

</html>

react入门-props.children的更多相关文章

  1. React中props.children和React.Children的区别

    在React中,当涉及组件嵌套,在父组件中使用props.children把所有子组件显示出来.如下: function ParentComponent(props){ return ( <di ...

  2. React中的this.props.children

    React this.props.children this.props对象的属性与组件的属性一一对应,但是有一个例外,就是this.props.children属性.它表示组件的所有子节点. var ...

  3. React.js 小书 Lesson22 - props.children 和容器类组件

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson22 转载请注明出处,保留原文链接和作者信息. 有一类组件,充当了容器的作用,它定义了一种外层 ...

  4. React的this.props.children

    this.props用来获取组件从外部传入的属性,但是this.props.children比较特殊,它是由React给添加上的,表示组件的所有子节点.this.props.children可以用来读 ...

  5. react中对props.children进行操作

    之前写的更多的时候是直接使用简写 {props.children} 这样就可以了,但是当有时候需要对传入的子组件进行一些操作的时候需要用到React.Children方法 {React.Childre ...

  6. react入门（2）

    接着上一次的讲,如果没有看过上一篇文章的小伙伴可以先看一下http://www.cnblogs.com/sakurayeah/p/5807821.html React事件 可以先看一下官网讲解的内容h ...

  7. React 入门实例教程

    现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...

  8. React入门 (1)—使用指南（包括ES5和ES6对比）

    前言 本篇会简明扼要的介绍一下React的使用方法.代码会用JSX+ES5和JSX+ES6两种方式实现. React简介 React来自Facebook,于2013年开源.至今不断修改完善,现在已经到 ...

  9. React入门简单实践

    参考文献: 1.React入门示例教程——阮一峰 2.React仅仅只是你的界限 React主要的优点就是增量更新(虚拟DOM)和组件化(状态机). <!DOCTYPE html> < ...

随机推荐

  1. VS中为非控制台程序提供控制台输出窗口

    /************************************************************************/ /* 模块名:ConsoleAdapter 文件名 ...

  2. Yii2 软删除

    什么是软删除 后台操作,删除一条记录,不希望真正的从数据库中删除,用个字段标记一下.比如delete_at.默认0.当执行删除操作,更新delete_at为当前时间戳 这样列表显示的时候只查询dele ...

  3. [hdu5503]EarthCup[霍尔定理]

    题意 一共 \(n\) 只球队,两两之间会进行一场比赛,赢得一分输不得分,给出每只球队最后的得分,问能否构造每场比赛的输赢情况使得得分成立.多组数据 \(T\le 10,n\le 5\times 10 ...

  4. Unity程序协同问题，传送时屏幕变黑变亮的解决，常规操作的行为集合

    在unity中运行某段程序时往往需要运行另外一段不相干但是却对功能上有需求的程序,比如进行场景传送,在传送点处,点击I键,屏幕慢慢变黑,场景传送到另外一个场景,场景又慢慢变亮.这里首先涉及两个物体,一 ...

  5. 在windows10上安装caffe和tensorflow

    最近在Windows10上安装了caffe和tensorflow,折腾了好久.在此记录一下. 安装caffe的过程已在另一篇博客中进行了记录,在此不再赘述.而tensorflow也是非常简单的,也不再 ...

  6. PHP学习 Object Oriented 面向对象 OO

    定义类class class_name [extends partclass_name]{public private protected var property_name = value;publ ...

  7. foreach 当被循环的变量为空时 不进入循环

    $a = []; foreach($a as $v){ echo 222; } //不会输出222 并且不会报错

  8. C++ 多态Polymorphism 介绍+动态绑定、静态绑定

    什么是多态? 多态(polymorphism)一词最初来源于希腊语polumorphos,含义是一种物质的多种形态. 在专业术语中,多态是一种运行时绑定机制(run-time binding) ,通过 ...

  9. c# 简易绘制C语言头文件包含关系图

    最近在做一个项目的移植工作,项目很大,光c文件大约有1800多.由于某些需要,想要对某些代码文件引用的.h文件进行分析. 网上找了好久,暂无发现类似的工具. 正好,今天放假,就做了这么个工具. 好了, ...

  10. 浅介MVC与Backbone

    1.MVC是什么东西? MVC (Modal View Controler) 是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model).视图(View)和控制器(Controll ...