在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. 初级字典树查找在 Emoji、关键字检索上的运用 Part-3

    系列索引 Unicode 与 Emoji 字典树 TrieTree 与性能测试 生产实践 生产实践 我们最终要解决 Emoji 在浏览器和打印物上的显示一致. 进行了多番对比,,在显示效果和精度上,m ...

  2. centos7 源码部署LNMP

    一.环境 系统环境:centos 7.4 64位 Nginx:1.7.9 MySQL: 5.7.20 (二进制包) PHP:5.6.37 二.Ngin 安装 Nginx部署 yum install   ...

  3. 前端开发工具icestar

    前端开发工具icestar 最近忙里偷闲,把之前的mock工具进行了全面的重构,最大的改变就是换了个名称icestar,icestar意思就是"爱死他",首先他的预想并不只是替代m ...

  4. Selenium和TestNG

    本文档由Felipe Knorr Kuhn撰写,并根据其博客上发布的一系列文章进行改编. 建模您的测试用例 在编写测试用例之前,您需要知道如何验证以及将要验证的内容.让我们使用WordPress “创 ...

  5. AssetBundleMaster

    AssetBundleMaster is an integrated solution for build AssetBundle and load assets from AssetBundles ...

  6. 如何基于 K8S 多租能力构建 Serverless Container

    当前 Kubernetes 已经成为名副其实的企业级容器编排规范,很多云平台都开始提供兼容 Kubernetes 接口的容器服务.而在多用户支持方面,多数平台选择直接提供专属虚机集群,用户需要花费大量 ...

  7. Linux内核分析——第四周学习笔记20135308

    第四周 扒开系统调用的“三层皮” 一.内核.用户态和中断 (一)如何区分用户态.内核态 1.一般现在的CPU有几种不同的指令执行级别 ①在高级别的状态下,代码可以执行特权指令,访问任意的物理地址,这种 ...

  8. YQCB冲刺第二周第七天

    今天的任务依旧为界面的美化. 遇到的问题为不熟悉css的使用. 站立会议 任务面板

  9. 动态绑定，多态，static

    1:下面程序的输出结果为: class base2{ static{ System.out.println("static base2"); } } public class te ...

  10. (Alpha)Let's-技术文档（技术规格说明书）

    技术规格说明书 抽象 首先,对抽象原则的理解,“抽象”这一概念本身就很抽象.抽象体现的是一种概括能力.我们生活中遇到的很多客体,其在某些方面具备有一些相似甚至相同的性质,以这些特点而非事物本身来认识鉴 ...