<!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. the security of smart contract- 2

    出处:https://cloud.tencent.com/developer/article/1192548 深度解析Solidity的17个坑及超详细避坑指南 写的很好,好好学习 1. Re-Ent ...

  2. solidity return data和revert/require的reason string的获得

    前言: 在使用solidity写智能合约的时候,会使用到revert和require来进行断言,比如: require(tokenOwner[tokenId] == 0x0,'this is not ...

  3. 笔记二:常用的h5语义化标签

    0.前言: 所谓语义化标签就是一种 我们仅通过标签名就能判断出该标签内容的语义的标签,见名知意. 总结这部分内容,主要是为了能从繁琐的div嵌套div中,改成带有h5标签码.这样更有利于读写代码. 人 ...

  4. MySQL 基础六 临时表 复制表结构

    1.临时表CREATE TEMPORARY TABLE test2( id INT ) SELECT *FROM test2 SHOW TABLES; INSERT INTO test2 VALUES ...

  5. Luogu3760 TJOI2017 异或和 树状数组

    传送门 题意:给出一个长度为$N$的非负整数序列,求其中所有连续区间的区间和的异或值.$N \leq 10^5$,所有元素之和$\leq 10^6$ 设序列的前缀和为$s_i$,特殊地,$s_0=0$ ...

  6. WebApi 异步请求（HttpClient）

    还是那几句话: 学无止境,精益求精 十年河东,十年河西,莫欺少年穷 学历代表你的过去,能力代表你的现在,学习代表你的将来 废话不多说,直接进入正题: 今天公司总部要求各个分公司把短信接口对接上,所谓的 ...

  7. Linux mount 命令进阶

    笔者在<Linux mount 命令>一文中介绍了 mount 命令的基本用法,本文我们接着介绍 mount 命令的一些高级用法,比如 bind mounts(绑定挂载)和 shared ...

  8. 挂载银行前置机Ukey到windows server2012虚拟机的操作记录

    公司有跟银行对接的金融业务,需要配置银行前置机环境.通过KVM的WebVirtMgr管理平台创建windows server2008虚拟机,安装参考:kvm虚拟化管理平台WebVirtMgr部署-完整 ...

  9. Python自动化运维工具-Fabric部署及使用总结

    使用shell命令进行复杂的运维时,代码往往变得复杂难懂,而使用python脚本语言来编写运维程序,就相当于开发普通的应用一样,所以维护和扩展都比较简单,更重要的是python运维工具fabric能自 ...

  10. python基础学习笔记（十二）

    模块 前面有简单介绍如何使用import从外部模块获取函数并且为自己的程序所用: >>> import math >>> math.sin(0) #sin为正弦函数 ...