在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. Caffe 深度学习框架上手教程

    Caffe 深度学习框架上手教程   blink 15年1月   Caffe (CNN, deep learning) 介绍 Caffe -----------Convolution Architec ...

  2. 一道面试题来了解线程notifyAll()和wait()的方法

    题目:三个线程,分别打印A.B.C,要求按ABC的顺序循环打印10次. package com.slowcity.crud.controller; public class PrintOneTwoTh ...

  3. zooland 新开源的RPC项目，希望大家在开发的微服务的时候多一种选择，让微服务开发简单，并且容易上手。

    zooland 我叫它动物园地,一个构思很长时间的一个项目.起初只是觉得各种通信框架都封装的很好了,但是就是差些兼容,防错,高可用.同时在使用上,不希望有多余的代码,像普通接口一样使用就可以了. 基于 ...

  4. stl源码剖析 详细学习笔记deque（1）

    //--------------------------15/3/12---------------------------- deque { deque没有容量(capacity)观念,是动态分段的 ...

  5. 一个web应用的诞生(3)--美化一下

    经过上一章的内容,其实就页面层来说已结可以很轻松的实现功能了,但是很明显美观上还有很大的欠缺,现在有一些很好的前端css框架,如AmazeUI,腾讯的WeUI等等,这里推荐一个和flask集成很好的b ...

  6. C#图片处理(转zhjzwl/archive)

    基本原理: 获取每一个像素值,然后处理这些每一个像素值.   原始图片: ISINBAEVA ~~~~~~~~ 一. 底片效果 原理: GetPixel方法获得每一点像素的值, 然后再使用SetPix ...

  7. idou老师教你学istio ：基于角色的访问控制

    istio的授权功能,也称为基于角色的访问控制(RBAC),它为istio服务网格中的服务提供命名空间级别.服务级别和方法级别的访问控制.基于角色的访问控制具有简单易用.灵活和高性能等特性.本文介绍如 ...

  8. C++基础知识（1）

    C语言是结构化编程语言(for循环.while循环.do while循环和if else语句),将低级语言的效率.硬件访问能力和高级语言的通用性.可移植性融合在一起. UNIX编译和链接 UNIX用C ...

  9. Kubernetes采用CoreDNS

    参考文档: kubernetes插件:https://github.com/kubernetes/kubernetes/tree/master/cluster/addons/dns/coredns 自 ...

  10. Linux内核分析第一二章读书笔记

    linux读书笔记(1,2章) 标签(空格分隔): 20135328陈都 第一章 Linux内核简介 Unix的历史 Unix 虽然已经使用了40年,但计算机科学家仍然认为它是现存操作系统中最强大和最 ...