<script type="text/babel">
<!-- this.props.children表示读取组件的所有子节点-->
var Zu=React.createClass({
render:function(){
return (
<ol>
{
React.Children.map(this.props.children,function(children){
return <li>{children}</li>;
})
}
</ol>
);
}
});

ReactDOM.render(
<Zu>
<span>AAAA</span>
<span>CCCCC</span>
</Zu>,
document.body
);
</script>

结果:1.AAAA

2.CCCCC

React组件二的更多相关文章

  1. React 16 源码瞎几把解读 【二】 react组件的解析过程

    一.一个真正的react组件编译后长啥样? 我们瞎几把解读了react 虚拟dom对象是怎么生成的,生成了一个什么样的解构.一个react组件不光由若干个这些嵌套的虚拟dom对象组成,还包括各种生命周 ...

  2. react学习笔记(二)编写第一个react组件

    继续上一节课的内容,打开App.js:会看到如下代码: import React, { Component } from 'react';  //在此文件中引用React,以及reat的组件类 imp ...

  3. 二、React初体验之React组件创建

    (中间因为应付各种考试,处理其他事情,隔了好时间没更新,现在终于有时间了,续上!) 本文为React初始体验,因此先不考虑文件如何组织,尽量以最简单的方式让大家了解React其中的原理. 在创建组件( ...

  4. React组件-mixin

    一.组件 二.代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&q ...

  5. React——组件的生命周期函数

    每一个组件都有一些生命周期函数. 当组件实例被创建并且会插入到DOM中,下面这些函数会被调用 constructor componentWillMount render componentDidMou ...

  6. 推荐一款中国风React组件

    最近看这个中国风的组件在掘金也火了一段时间,看了有几天了,也体验了下,感觉还不错,所以准备来安利下 项目地址:https://github.com/zhui-team/zhui 使用手册请参考:htt ...

  7. jQuery和react实现二维码

    jq如何生成二维码 代码如下: 1.jquery.qrcode生成二维码代码 <!DOCTYPE html> <html> <head> <script ch ...

  8. React 组件间通信介绍

    React 组件间通信方式简介 React 组件间通信主要分为以下四种情况: 父组件向子组件通信 子组件向父组件通信 跨级组件之间通信 非嵌套组件间通信 下面对这四种情况分别进行介绍:   父组件向子 ...

  9. [转] 深入理解React 组件状态(State)

    React 的核心思想是组件化的思想,应用由组件搭建而成,而组件中最重要的概念是State(状态),State是一个组件的UI数据模型,是组件渲染时的数据依据. 一. 如何定义State 定义一个合适 ...

随机推荐

  1. 【三支火把】---常用C语言控制台函数总结(持续更新)

    写了这么久的C程序,每次看到输出的结果都是从上往下排列的黑白框,有没有感觉很无聊啊?今天再次总结一个常用的控制台函数,能够帮助你做好一个好看的界面. 1.设置光标位置代码如下: int main(vo ...

  2. 如何将Android默认的Camra程序导入到eclipse中

    由于工作需要将camera源码导入到Eclipse中,找了很多的方法,现将自己的整理发出来.... 由于开发的要求,需要将Android默认的Camra程序导入到eclipse中,进行修改和再开发. ...

  3. myBatis性能优化【转】

    官方doc文档 http://www.mybatis.org/mybatis-3/configuration.html#settings 最近测试发现个myBatis 有个比较严重的性能问题, 描述如 ...

  4. linux用户与组的管理(命令加入、手动加入、加入组、用户之间的切换)

    一.用户登录的时候须要验证的是这两个文件 检測username   Login:  root                        到该文件夹下检查 /etc/passwd 检測用passwo ...

  5. mysqld with valgrind

    使用编译脚本编译MariaDB 现在进入源代码目录并执行符合你的配置的编译脚本,比如: cd $maria-source-dir # ex: ~/repos/maria/trunk BUILD/com ...

  6. 定制操作(传递函数或lambda表达式)

    很多算法都会比较输入序列中的元素.默认情况下,这类算法使用元素类型的<或==运算符完成比较.标准库还为这些算法定义了额外的版本,允许我们提供自己定义的操作来代替默认运算符. 例如,sort算法默 ...

  7. Android主题换肤 无缝切换

    2016年7月6日 更新:主题换肤库子项目地址:ThemeSkinning,让app集成换肤更加容易.欢迎star以及使用,提供改进意见. 更新日志: v1.3.0:增加一键切换切换字体(初版)v1. ...

  8. 使用Netty进行Android与Server端通信实现文字发送接收与图片上传

    ANOTHER TITLE: Let’s use netty to achieve text send and receive and  image transfer to server based ...

  9. Unity3D 之3D动画机设置

    新建一个动画机 然后创建一些动画的属性 每根线都是一个动画到下一个动画的转变,动画的转变是基于条件的. 1.通过建立Parameters设定动画的转换条件 2.右边的Conditions设定可以设定是 ...

  10. MVC小系列(十三)【全局异常处理与异常日志】

    在MVC网站的global.asax中的Application_Start方法里,有这样一段代码 protected void Application_Start() { //它的主要作用是将全局过滤 ...