<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script src="js/react.js"></script>
  <script src="js/react-dom.js"></script>
  <script src="js/browser.min.js"></script>
</head>
<body>
<div id="example"></div>

<script type="text/babel">

  var MyList = React.createClass({
    render:function(){
      return <ol>
      {
        React.Children.map(this.props.children,
        function(child){
          return <li>{child}</li>
        })
      }
      </ol>
    }
  })

  ReactDOM.render(
  <MyList>
    <a>test01</a>
    <span>test02</span>
    <span>test03</span>
  </MyList>,
  document.getElementById('example')
  )

</script>

</body>
</html>

React child的更多相关文章

  1. React报错之Objects are not valid as a React child

    正文从这开始~ 总览 当我们尝试在JSX代码中,直接渲染对象或者数组时,会产生"Objects are not valid as a React child"错误.为了解决该错误, ...

  2. React报错之Functions are not valid as a React child

    正文从这开始~ 总览 产生"Functions are not valid as a React child. This may happen if you return a Compone ...

  3. 走进React

    走进React React是一个构建用户界面的JavaScript库,是Facebook公司在2013年5月在github上开源的.其特点如下: 高效--React通过对DOM的模拟,最大程度地减少和 ...

  4. react 插槽(Portals)

    前言: 昨天刚看了插槽,以为可以解决我工作中遇到的问题,非常激动,我今天又仔细想了想,发现并不能解决... 不过还是记录一下插槽吧,加深印象,嗯,就酱. 插槽作用: 插槽即:ReactDOM.crea ...

  5. JavaScript 和 React，React用了大量语法糖，让JS编写更方便。

    https://reactjs.org/docs/higher-order-components.htmlhttps://codepen.io/gaearon/pen/WooRWa?editors=0 ...

  6. React源码 React.Children

    children是什么意思呢?就是我们拿到组件内部的props的时候,有props.children这么一个属性,大部分情况下,我们直接把 props.children 渲染到 JSX 里面就可以了. ...

  7. React源码解析之React.Children.map()(五)

    一,React.Children是什么? 是为了处理this.props.children(this.props.children表示所有组件的子节点)这个属性提供的工具,是顶层的api之一 二,Re ...

  8. 深入理解React：事件机制原理

    目录 序言 DOM事件流 事件捕获阶段.处于目标阶段.事件冒泡阶段 addEventListener 方法 React 事件概述 事件注册 document 上注册 回调函数存储 事件分发 小结 参考 ...

  9. React踩坑笔记 —— React

    Webpack提供了自己的导入方式require.include,但同时也支持commonjs规范或AMD规范的require语法,而Node.js使用的就是common.js,ES6的语法Impor ...

随机推荐

  1. gulp学习-metamask前端使用

    https://www.gulpjs.com.cn/docs/getting-started/ ,这个是3.9.0版本 后面发现安装的版本是4.0.0,看下面这个: https://github.co ...

  2. 迭代器协议和for循环工作机制

    一.递归和迭代 举个例子 递归:假如我去问路,路人甲看我长得盛世容颜,但是他不知道,他就去帮我问路人乙去了,路人乙跟路人甲说我也不知道,但一看路人甲美若天仙,就说,我去帮你问问路人丙,...完了可能得 ...

  3. oracle 查询归档增长量

    set linesize 200set pagesize 100column day format a15 heading 'Day'column d_0 format a3 heading '00' ...

  4. MATLAB——径向基网络拟合曲线和分类

    1.:.:; rand('state',pi); %指定状态,产生相同的随机数 T=sin(*P)+rand(,length(P)); % 给正弦函数加噪声 plot(P,T,'o') % net=n ...

  5. Centos6.8配置HTTPS

    HTTPS服务http+openssl 环境要求:CA证书: 192.168.1.103网站服务器: 192.168.1.104客户端: 192.168.1.107 (linux图形化界面) 内核:( ...

  6. Android学习之基础知识三（Android日志工具Log的使用）

    Android中的日志工具Log(android.util.Log): 1.打印日志的方法(按级别从低到高排序): Log.v():级别verbose,用于打印最为烦琐,意义最小的日志 Log.d() ...

  7. oa tomcat 代码处理跨域问题

    meta标签处理http.https跨域 <!-- 将http请求转成https请求 --> <meta http-equiv="Content-Security-Poli ...

  8. 开发工具｜给你的项目买份保险：Python虚拟环境

    读完需要 9 分钟 1. 什么是虚拟环境? 虚拟环境的意义,就如同 虚拟机 一样,它可以实现不同环境中Python依赖包相互独立,互不干扰.这在一定程度的意义上,给了我们的项目一份很有力的保障.在这里 ...

  9. flask多app和栈的应用

    一.简介     flask的蓝图可以实现url的分发,当有多个app时也可以利用app进行url分发,这里介绍下使用方式和内部原理以及栈的应用. 二.多app使用 使用示例 from werkzeu ...

  10. 51Nod 1443 路径和树

    还是一道很简单的基础题,就是一个最短路径树的类型题目 我们首先可以发现这棵树必定满足从1出发到其它点的距离都是原图中的最短路 换句话说,这棵树上的每一条边都是原图从1出发到其它点的最短路上的边 那么直 ...