<!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. geth中UTC文件与私钥的关系

    在创建了自己的本地区块链后,我们会得到一个文件夹keystore,该文件夹是用来存储你在这个区块链中创建的账户的备份钥匙文件,比如在这里我有一个账户的备份钥匙文件为:UTC--2018-07-12T0 ...

  2. PAT A1150 Travelling Salesman Problem （25 分）——图的遍历

    The "travelling salesman problem" asks the following question: "Given a list of citie ...

  3. LVS + Keepalived 理论

    LVS 纯理论: VRRP协议与工作原理 在现实的网络环境中,主机之间的通信都是通过配置静态路由或者(默认网关)来完成的,而主机之间的路由器一旦发生故障通信就会失效,因此这种通信模式当中,路由器就成了 ...

  4. docker被入侵后.............

    服务器上线后,怎么发现总有个 xmrig 的容器在跑,删了还出来 那么恭喜你!!你的服务器已经被入侵了!! $ docker ps IMAGE               COMMAND       ...

  5. 在线图标制作，格式转换 ICON

    在线图标制作,格式转换 https://www.easyicon.net/covert/

  6. git lg 配置

    git config --global alias.lg "log --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d ...

  7. npm install报错 npm ERR! enoent ENOENT: no such file or directory

    在npm之后出现如下错误: $ npm install npm WARN checkPermissions Missing write access to /Users/lucas/code/js/v ...

  8. JavaFx之不通过全局静态变量进行窗体通信

    百度了n多窗体通信,,,总是通过定义全局静态变量进行传值通信..我个人不喜欢一个controller里写满所有的布局(这样显得臃肿,但是组件传值方便).有没有另外的办法进行模块化并且可以传值呢.. 肯 ...

  9. odoo 11 实现多个字段对应一个查询参数的查询

    在整理英语单词开发模块的过程中,有这样一个需求,就是我在查询界面里输入一个查询的值A,这个A可能是下面的任何一个值 1.一个英语单词  2.汉语文字  3.一个英语单词的部分 这里有两张表:engli ...

  10. Python高阶函数--map

    map()函数 map()是 Python 内置的高阶函数,它接收一个函数 f 和一个 list,并通过把list 的每个元素依次作用在函数 f 上,得到一个新的 list 并返回. 例如,对于lis ...