<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. 无法通过 128 (在表空间 TEMP 中) 扩展 temp 段

    1.查看表空间中数据文件存储的路径以及是否可以自动扩展 SELECT TABLESPACE_NAME, BYTES/1024/1024 FILE_SIZE_MB, FILE_NAME FROM DBA ...

  2. 【三支火把】---队列和栈的C程序实现

    这几天总结了C语言的队列,栈的实现方法,在此总结一下:一.栈 首先从栈开始,诚然,相信学习过数据结构的你,肯定应该知道栈是什么东西了,如果不知道也没事每一句话我就可以帮你总结--数据只在栈顶进行插入和 ...

  3. 【JAVA - SSM】之MyBatis逆向工程的使用

    MyBatis逆向工程可以方便的从数据库中将表自动映射到JAVA POJO类,并同时生成Mapper.xml和Mapper接口,方便实用.下面介绍一下逆向工程的使用方法. 使用逆向工程,我们最好是新建 ...

  4. eclipse 不能切换输入法

    按了Alt+Shift键?再按一次把EN切换成CN,然后再Ctrl+Shift就可以切换输入法

  5. CAS分析——Core

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  6. heritrix 相关

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  7. Android ListView分页加载时图片显示问题

    场景:Android ListView需要分页加载,每个item中会有图片,图片又是从网络下载的. 问题:在滑动加载下一页时,上一页的图片明明已经下载完成了,但是无法显示出来. Bug重现: 1,加载 ...

  8. 解决 子进程已安装的 post-removal脚本返回了错误号 100 的方法

    打开终端: $gksudo nautilus 进入目录: /var/lib/dpkg 删除: info info.bak (文件夹) 重建文件夹: info 之后重新安装 或删除就可以了.

  9. Activity 与ListActivity的区别

    转载自 http://www.cnblogs.com/bravestarrhu/archive/2012/05/06/2486703.html

  10. iOS之AVPlayer的简单应用

    1.引入系统框架 2.创建视频的url 3.创建播放项目 4.初始化播放器 5.设置播放页面 //引入系统文件 #import <AVFoundation/AVFoundation.h> ...