在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. python 23 种 设计模式

    频率 所属类型 模式名称 模式 简单定义 5 创建型 Singleton 单件 保证一个类只有一个实例,并提供一个访问它的全局访问点. 4 创建型 Abstract Factory 抽象工厂 提供一个 ...

  2. 洛咕 P3704 [SDOI2017]数字表格

    大力推式子 现根据套路枚举\(\gcd(i,j)\) \(ans=\Pi_{x=1}^nfib[x]^{\sum_{i=1}^{n/x}\sum_{j=1}^{n/x}[\gcd(i,j)=1]}\) ...

  3. libgdx学习记录18——Box2d物理引擎

    libgdx封装了Box2D物理引擎,通过这个引擎能够模拟物理现实,使设计出的游戏更具有真实感. libgdx中,Box2d程序的大概过程: 1. 创建物理世界world,并设置重力加速度. 2. 创 ...

  4. JS 获取每月有几周（每周五到周四算作一周）

    原文地址:https://caochangkui.github.io/data-week/ 将每周五至周四算作一周,计算每月有几周,并获取到每周的起始时间. 日期格式化 Date.prototype. ...

  5. [CF1083F]The Fair Nut and Amusing Xor[差分+同余分类+根号分治+分块]

    题意 给定两个长度为 \(n\) 的序列 \(\{a_i\}\) 与 \(\{b_i\}\),你需要求出它们的相似度.,我们定义这两个序列的相似度为将其中一个序列转化为另一个序列所需的最小操作次数.一 ...

  6. WinForm 随手记

    从今天开始咱们正式进入WinForm开发模式 首先很官方的介绍下什么是winform:客户端应用程序:C/S 这就是winform 有什么特别特别重要的特点呢:可以操作用户电脑上的文件 举个简单的例子 ...

  7. docker之容器数据持久化

    1.挂载本地目录为容器的数据存放目录 [root@node03 ~]# docker run -itd --name web01 -v /container_data/web:/data ubuntu ...

  8. Dictionary 对象

    Dictionary 对象 对象的存储数据键/项对. 语法 Scripting.Dictionary 说明 Dictionary对象相当于 PERL 关联数组. 项目,可以是任何形式的数据,存储在数组 ...

  9. GitHub 新手教程 七，Git GUI 新手教程（4），上传本地代码库到GitHub

    1,打开 GitGUI,单击我们之前克隆好的本地库: 2,按图示顺序点击按钮: 3,按图示顺序点击按钮,输入您的 Sign 信息: 4,按图示顺序点击按钮: 5,弹出新的窗口后,点击 “Push” 按 ...

  10. PAT甲题题解-1101. Quick Sort (25)-大水题

    快速排序有一个特点,就是在排序过程中,我们会从序列找一个pivot,它前面的都小于它,它后面的都大于它.题目给你n个数的序列,让你找出适合这个序列的pivot有多少个并且输出来. 大水题,正循环和倒着 ...