<!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. 转载 javascript中(function($){...})(jQuery)写法是什么意思

    javascript中(function($){...})(jQuery)写法是什么意思   这里实际上是匿名函数function(arg){...}这就定义了一个匿名函数,参数为arg 而调用函数 ...

  2. python关联eureka实现高并发

    弥补网上python关联微服务空白,结合多个pythonweb框架实践,找到一个可行的方案python加入到eureka,实现java和python的完美结合 # coding:utf- import ...

  3. JVM解释器和编译器

    首先看一个命令 [root@insure ~]# java -version java version "1.8.0_191" Java(TM) SE Runtime Enviro ...

  4. Ubuntu系统多屏幕时 触摸屏如何分屏定位

    有很多的使用我们需要在Ubuntu系统中使用多屏幕的情况,但是有的时候是一个屏幕的触摸屏幕,另一个屏幕是非触摸屏幕,但是问题来了, 有的时候在触摸屏幕上点击的时候竟然在非触摸的响应,这种情况非常不友好 ...

  5. java 迭代器遍历List Set Map

    Iterator接口: 所有实现了Collection接口的容器类都有一个iterator方法用以返回一个实现Iterator接口的对象 Iterator对象称作为迭代器,用以方便的对容器内元素的遍历 ...

  6. C. Report

    题意:给出n个无序的数以及m个操作,每个操作由两个数组成,第一个数是操作的方式,第二个数 i 是操作的范围,若第一个数是1,则给 1-i 个数按升序排序,若第二个数是2,则给 1-i 个数按降序排列. ...

  7. (推荐)用C++来开发Skyline应用

    原文地址:http://www.hailongchang.org/index.php/archives/category/terraexplorer 供大家学习参考.

  8. ASP.NET MVC学习笔记（一） 从路由开始创建mvc

    之前一篇写一半发现版本太老了,是基于mvc2的. 两本参考书编写的顺序各方面都不太一样.决定重新写一篇. 我这篇文章基于mvc5,vs2015 参考书:Will保哥的ASP.NET MVC4开发指南 ...

  9. C# 定时器和队列结合，卖包子啦，Timer、 AutoResetEvent、 ManualResetEvent

    再你们得到源码之前,我先做个广告:张家港杰德机械/张家港三兴华轩机械是我一朋友的公司,希望需要做净水,灌装机,拔盖机,封口机,传送带等的朋友光顾. 张家港杰德机械有限公司:http://www.jie ...

  10. [HNOI2018]游戏[拓扑排序]

    题意 题目链接 分析 先将没有锁的房间缩点,首先有一个 \(O(n^2)\) 的想法:从每个点出发,每次检查能否向两边扩张. 容易发现门和门之间如果有锁,必然只有一方能够开锁(只有一把钥匙),并且能够 ...