<!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. AI 机器学习基础

    深度学习是机器学习的一个特定分支. 1.学习算法 对于某类任务T和性能度量P, 2.线性回归 3.正规方程(normal equation) 4.监督学习(supervised learning) 5 ...

  2. Python package和module

    package,即包,可以把功能相近的module(模块)组织在一起,以便更好地管理.Java中也有包的概念,作用类似,是为了更好地管理类和接口.package,说白了就是个目录,不过这个目录下一定要 ...

  3. 【Codeforces 815C】Karen and Supermarket

    Codeforces 815 C 考虑树型dp. \(dp[i][0/1][k]\)表示现在在第i个节点, 父亲节点有没有选用优惠, 这个子树中买k个节点所需要花的最小代价. 然后转移的时候枚举i的一 ...

  4. 【Codeforces Round 1132】Educational Round 61

    Codeforces Round 1132 这场比赛做了\(A\).\(B\).\(C\).\(F\)四题,排名\(89\). \(A\)题\(wa\)了一次,少考虑了一种情况 \(D\)题最后做出来 ...

  5. xshell替代工具finalShell

    主要特性:1.多平台支持Windows,Mac OS X,Linux2.多标签,批量服务器管理.3.支持登录Ssh和Windows远程桌面.4.漂亮的平滑字体显示,内置100多个配色方案.5.终端,s ...

  6. （转）Syntax error:

    但是运行时总是报下面这个错,如下: test11-loop.sh: 5: Syntax error: Bad for loop variable 几经查找语法,没有问题,后来在网上找到问题原因: 代码 ...

  7. C#基础巩固(3)-Linq To XML 读取XML

    记录下一些读取XML的方法,以免到用的时候忘记了,还得花时间去找. 一.传统写法读取XML 现在我有一个XML文件如下: 现在我要查找名字为"王五"的这个人的 Id 和sex(性别 ...

  8. .Net架构篇:思考如何设计一款实用的分布式监控系统？

    前言 无论从最早期的unix操作系统,还是曾经大行其道的单体式应用,还是现在日益流行的微服务架构,始终都离不开监控的身影.如windows的任务管理器,linux的top命令,都可以看作是监控的面板. ...

  9. subprocess.Popen指令包含中文导致乱码问题解决

    其实解决起来非常简单,如果了解到Windows中文系统编码为GB2312的话 只需将你包含中文的指令字符串编码为GB2312即可 cmd = u'cd 我的文档' cmd.encode('gb2312 ...

  10. slurmdbd.conf系统初始配置

    # Archive info ArchiveJobs=yes ArchiveDir=/usr/local/globle/softs/slurm/16.05.3/archive/ ArchiveStep ...