[React] Extracting Private React Components
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的更多相关文章
- [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 ...
- [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 ...
- react聊天室|react+redux仿微信聊天IM实例|react仿微信界面
一.项目概况 基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+react-photoswipe+swiper等技术混合开 ...
- [react] 细数 React 的原罪
Props & onChange 的原罪 .「props & onChange 接口规范」它不是一个典型的「程序接口规范」. 当你拿到一个可视组件的 ref,却没有类似 setProp ...
- React笔记：React基础（2）
1. JSX JSX是一种拥有描述UI的JavaScript扩展语法,React使用这种语法描述组件的UI. 1.1 基本语法 JSX可以嵌套多个HTML标签,可以使用大部分符号HTML规范的属性. ...
- react初探索--react + react-router + ant-design 后台管理系统配置
首先确认安装了node环境,Node >= 6. 如果对react 及 ant-design 一无所知,建议去阅读下api文档,react 可以在 codePen 在线练习. react Api ...
- react新特性 react hooks
本文介绍的是react新特性react hooks,本文面向的是有一定react开发经验的小伙伴,如果你对react还不是很熟悉的话我建议你先学习react并多多联系. 首先我们都知道react有3种 ...
- 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 ...
- 七天接手react项目 系列 —— react 脚手架创建项目
其他章节请看: 七天接手react项目 系列 react 脚手架创建项目 前面我们一直通过 script 的方式学习 react 基础知识,而真实项目通常是基于脚手架进行开发. 本篇首先通过 reac ...
随机推荐
- Visual Studio2015 Community一些必备插件
Visual Studio2015 Community一些必备插件 是不是感觉虽然VS2015的代码编辑能力已经很强大了,但是总感觉差了那么一些呢?不用担心,它有很多非常强大的插件,能够让你打代码事半 ...
- 神器-Sublime Text 3 代码编辑器安装与使用
一.软件获取 1.软件下载地址:http://www.sublimetext.com/3. 2.注册机和汉化下载:http://files.cnblogs.com/files/1312mn/subli ...
- php访问方法外变量
class Capture { private static $_CapSite = 222; function dd() { echo self::$_CapSite; } } $cc=new Ca ...
- Caused by: java.lang.NullPointerException, java.lang.reflect.InvocationTargetExc
java.lang.reflect.InvocationTargetException at sun.reflect.NativeMethodAccessorImpl.invoke0(Native M ...
- GetWindowText
用于得到窗口中的数据 {// TODO: If this is a RICHEDIT control, the control will not// send this notification un ...
- FlowPlayer 参数说明
<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> & ...
- 论 Java 中获取一组不重复的随机数之性能问题
今天在做一个Java项目, 用到了使用一组不重复的随机数问题, 不管怎么做随机数里面总有几个是重复的. 于是上网去找资料, 在网上找到的资料中大部分都是一个思路: 网上的思路一:(性能不理想) 先生成 ...
- XAMPP安装教程
XAMPP(Apache+MySQL+PHP+PERL)是一个功能强大的建站集成软件包.这个软件包原来的名字是LAMPP,但是为了避免误解,最新的几个版本就改名为 XAMPP 了.它可以在Window ...
- 用Set中元素做条件查询
一个老师教许多学生,一个学生被许多老师教,一个学生有好多书,同一种书被许多同学拥有.查询教拥有书"a"的学生的老师: class teacher{ String id; ...
- LINUX的命令（未完待续）
遇到忘了的Linux命令,复习之后,把它记在这里,供以后复习. ^C:刚开始在看视频的时候发现上面有cd ^C,还以为这是个什么命令,其实^C这不是输入进去的,当你按了Ctrl+C之后就会出现^C,C ...