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. python面对对象编程------4：类基本的特殊方法__str__,__repr__,__hash__,__new__,__bool__,6大比较方法

    一:string相关:__str__(),__repr__(),__format__() str方法更面向人类阅读,print()使用的就是str repr方法更面对python,目标是希望生成一个放 ...

  2. AjaxManager的实现

    在NeralJS思路整理一章中我们提到过实用ajax管理模块控制ajax请求,以减少ajax请求数量,优化加载,以下是ajax模块的实现,我已经确保经历简单. /** * Created by wil ...

  3. CRC32校验的用法

    CRC32校验数据的完整性 这里的数据包括字符串.文件,还有哪些? 文件校验相当于下载大型软件,有md5加密结果.这里的用途是什么?

  4. 熟悉java堆内存和栈内存和mysql的insert语句中含有id的处理

    java的堆内存和栈内存有什么区别呢? 如果mysql数据库表的id是递增的,如果没有插入id,则id自增,如果插入id,则插入什么就显示什么.

  5. HTML5与APP的交互

    phonegap框架,html5直接用于移动开发的框架.现版本UI延迟据说还是略大. App中搞活动,每次都通过mobile api把url给app即可. App操作Html webview.load ...

  6. QC 2.0为啥可以快充

    根据高通给出的数据,Quick Charge 2.0 A级标准规定的最大充电电流为3A,如果在5V的情况下,充电功率就为15W,因此充电速度要比最高支持10W的Quick Charge 1.0技术更快 ...

  7. keepalived + nginx

    本文主要介绍keepalived的安装,Nginx自行解决,也可以使用httpd.随便任何服务都可以... keepalived 官网http://www.keepalived.org/index.h ...

  8. 1.2 Coin 项目

    自2009年起,Coin便是Java 7(和Java 8)中一个开源的子项目.创建Coin项目是为了反映Java语言中的微小变动: 修改Java语言,按不同的修改方式及其复杂度依次分为:类库.工具提供 ...

  9. mysql版本问题sql_mode=only_full_group_by

    set @@sql_mode='STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_DIVISION_BY_ZERO,NO_AUTO_ ...

  10. mysql 整形的长度问题

    tinyint  有符号的范围是-128至127: 无符号的范围是0到255,2的8 次方-1: 存储大小为 1 字节. smallint  有符号的范围是-32768至32767: 无符号的范围是0 ...