React组件二
<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组件二的更多相关文章
- React 16 源码瞎几把解读 【二】 react组件的解析过程
一.一个真正的react组件编译后长啥样? 我们瞎几把解读了react 虚拟dom对象是怎么生成的,生成了一个什么样的解构.一个react组件不光由若干个这些嵌套的虚拟dom对象组成,还包括各种生命周 ...
- react学习笔记(二)编写第一个react组件
继续上一节课的内容,打开App.js:会看到如下代码: import React, { Component } from 'react'; //在此文件中引用React,以及reat的组件类 imp ...
- 二、React初体验之React组件创建
(中间因为应付各种考试,处理其他事情,隔了好时间没更新,现在终于有时间了,续上!) 本文为React初始体验,因此先不考虑文件如何组织,尽量以最简单的方式让大家了解React其中的原理. 在创建组件( ...
- React组件-mixin
一.组件 二.代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&q ...
- React——组件的生命周期函数
每一个组件都有一些生命周期函数. 当组件实例被创建并且会插入到DOM中,下面这些函数会被调用 constructor componentWillMount render componentDidMou ...
- 推荐一款中国风React组件
最近看这个中国风的组件在掘金也火了一段时间,看了有几天了,也体验了下,感觉还不错,所以准备来安利下 项目地址:https://github.com/zhui-team/zhui 使用手册请参考:htt ...
- jQuery和react实现二维码
jq如何生成二维码 代码如下: 1.jquery.qrcode生成二维码代码 <!DOCTYPE html> <html> <head> <script ch ...
- React 组件间通信介绍
React 组件间通信方式简介 React 组件间通信主要分为以下四种情况: 父组件向子组件通信 子组件向父组件通信 跨级组件之间通信 非嵌套组件间通信 下面对这四种情况分别进行介绍: 父组件向子 ...
- [转] 深入理解React 组件状态(State)
React 的核心思想是组件化的思想,应用由组件搭建而成,而组件中最重要的概念是State(状态),State是一个组件的UI数据模型,是组件渲染时的数据依据. 一. 如何定义State 定义一个合适 ...
随机推荐
- JBoss 目录结构
安装JBoss 会创建下列目录结构: 目录 描述 bin 启动和关闭JBoss 的脚本 client 客户端与JBoss 通信所需的Java 库(JARs) docs 配置的样本文件(数据库配置 ...
- Redis_基本类型介绍和指令___2
1.hash Redis hash 是一个string类型的field和value的映射表,hash特别适合用于存储对象. Redis 中每个 hash 可以存储 232 - 1 键值对(40多亿). ...
- Android网络传输中必用的两个加密算法:MD5 和 RSA (附java完毕測试代码)
MD5和RSA是网络传输中最经常使用的两个算法,了解这两个算法原理后就能大致知道加密是怎么一回事了.但这两种算法使用环境有差异,刚好互补. 一.MD5算法 首先MD5是不可逆的,仅仅能加密而不能解密. ...
- 兰亭集势笔试题:用最优方法从LinkedList列表中删除重复元素
用运行速度最优的方法从LinkedList列表里删除重复的元素,例如A->B->BB->B->C,返回A->B->BB->C. 考试的时候没完全想明白,考完又 ...
- CentOS 配置httpd使局域网能够正常訪问
[转载请注明出处: 钱国正的专栏http://blog.csdn.net/qianguozheng/article/details/37611859] 问题: 在CentOS上安装apache,配置好 ...
- OpenOffice的安装与启动
一.安装openOffice1.使用tar -xzvf OOo_3.2.0_LinuxIntel_install_wJRE_en-US.tar.gz解压缩后,会得到OOO320_m12_native_ ...
- iOS开发中一些常用的方法
1.压缩图片 #pragma mark 处理图片 - (void)useImage:(UIImage *)image { NSLog(@"with-----%f heught-----%f& ...
- [转]HTML5 classList API
Having thrust myself into the world of JavaScript and JavaScript Libraries, I've often wondered: Whe ...
- Android_EditText
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&q ...
- 集合练习——Set部分
我们知道list存储的是有序不唯一的元素. set存储的是无序唯一的元素. 那么下面看一个例子吧: package CollectionPart; import java.util.HashSet; ...