we leverage private components to break our render function into more manageable pieces without leaking the implementation details of our component.

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>JS Bin</title>

  <script src="//fb.me/react-0.14.3.js"></script>

  <script src="//fb.me/react-dom-0.14.3.js"></script>

</head>

<body>

  <div id="app"></div>

</body>

</html>
const users = [

  { name: 'Merrick', id: 1 },

  { name: 'John', id: 2 },

  { name: 'Trevor', id: 3 }

]

const UserListItem = ({user}) => {

  return (

     <div>

       {user.name}

     </div>

  );

};

class UserList extends React.Component {

  render(){

    return (

      <div>

        <h1>Users</h1>

        {

           this.props.users.map( (user) => {

              return <UserListItem user={user} key={user.id} />

           })

        }

      </div>

    );

  }

}

ReactDOM.render(<UserList users={users} />, document.getElementById('app'));

[React] Extracting Private React Components的更多相关文章

  1. [React] Render Text Only Components in React 16

    In this session we create a comment component to explore how to create components that only render t ...

  2. [React] Recompose: Theme React Components Live with Context

    SASS Bootstrap allows us to configure theme or branding variables that affect all components (e.g. P ...

  3. react聊天室|react+redux仿微信聊天IM实例|react仿微信界面

    一.项目概况 基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+react-photoswipe+swiper等技术混合开 ...

  4. [react] 细数 React 的原罪

    Props & onChange 的原罪 .「props & onChange 接口规范」它不是一个典型的「程序接口规范」. 当你拿到一个可视组件的 ref,却没有类似 setProp ...

  5. React笔记：React基础（2）

    1. JSX JSX是一种拥有描述UI的JavaScript扩展语法,React使用这种语法描述组件的UI. 1.1 基本语法 JSX可以嵌套多个HTML标签,可以使用大部分符号HTML规范的属性. ...

  6. react初探索--react + react-router + ant-design 后台管理系统配置

    首先确认安装了node环境,Node >= 6. 如果对react 及 ant-design 一无所知,建议去阅读下api文档,react 可以在 codePen 在线练习. react Api ...

  7. react新特性 react hooks

    本文介绍的是react新特性react hooks,本文面向的是有一定react开发经验的小伙伴,如果你对react还不是很熟悉的话我建议你先学习react并多多联系. 首先我们都知道react有3种 ...

  8. WHAT IS THE DIFFERENCE BETWEEN REACT.JS AND REACT NATIVE?

    Amit Ashwini - 09 SEPTEMBER 2017 React.js was developed by Facebook to address its need for a dynami ...

  9. 七天接手react项目 系列 —— react 脚手架创建项目

    其他章节请看: 七天接手react项目 系列 react 脚手架创建项目 前面我们一直通过 script 的方式学习 react 基础知识,而真实项目通常是基于脚手架进行开发. 本篇首先通过 reac ...

随机推荐

  1. win8发布 wcf问题

    WCF services don’t run on IIS 8 with the default configuration, because the webserver doesn’t know, ...

  2. iOS 网络与多线程－－6.下载并保存网络图片

    使用二进制数据对象的,从制定网站获取数据的方法,下载网络图片,并转化为二进制数据,然后将二进制数据保存到磁盘 按照注释需要进行阅读以下代码 // Created by JinXin on 15/12/ ...

  3. tribonacci

    Everybody knows Fibonacci numbers, now we are talking about the Tribonacci numbers: T[0] = T[1] = T[ ...

  4. 控件真的很好用，突然感觉自己以前研究Discuz！NT366源码的方式很2了

    控件真的很好用,突然感觉自己以前研究Discuz!NT366源码的方式很2了,就是按钮上的或其他控件上的图片哪里去了?

  5. nuc950支持nand的mtd驱动的kernel修改

    支持nand的mtd驱动的kernel修改 一.更新nanddriver文件 将新的nanddriver文件nuc900_nand.c放到kernel的drivers/mtd/nand目录下 二.修改 ...

  6. ADO.NET 新特性之SqlBulkCopy(批量插入大量数据)

    转自:http://blog.csdn.net/huaer1011/article/details/2312361 在.Net1.1中无论是对于批量插入整个DataTable中的所有数据到数据库中,还 ...

  7. 使用 HTTP 缓存机制提升系统性能

    摘要 HTTP缓存机制定义在HTTP协议标准中,被现代浏览器广泛支持,同时也是一个用于提升基于Web的系统性能的广泛使用的工具.本文讨论如何使用HTTP缓存机制提升基于Web的系统,以及如何避免误用. ...

  8. PHPCMS V9二次开发便捷自定义后台入口文件夹

    phpcms v9二次开发便捷自定义后台入口文件夹 最新发布的phpcms v9由于采用了mvc的设计模式,所以它的后台访问地址是固定的,虽然可以通过修改路由配置文件来实现修改,但每次都修改路由配置文 ...

  9. 在PHP中获取日期和时间

    PHP提供了多种获取时间和日期的函数,除了通过time()函数获取当前的UNIX时间戳外,调用getdate()函数确定当前时间,通过gettimeofday()函数获取某一天中的具体时间.此外,在P ...

  10. php 学习路线 赵兴壮2014年4月28 日 加油

    第一阶段 第一讲,WEB基础     1.1 网站基本知识: 1.2 网络协议介绍: 1.3 B/S与C/S结构的区别: 1.4 WEB编程.网站开发技术介绍.      第二讲,网页设计     2 ...