如果你创建了类似于下面的 Twitter 元素,那么它相关的类定义是啥样子的?
代码:
<Twitter username='tylermcginnis33'>
{(user) => user === null
? <Loading />
: <Badge info={user} />}
</Twitter>
代码:
import React, { Component, PropTypes } from 'react'
import fetchUser from 'twitter'
// fetchUser take in a username returns a promise
// which will resolve with that username's data.
class Twitter extends Component {
// finish this
}
如果你还不熟悉回调渲染模式(Render Callback Pattern),这个代码可能看起来有点怪。
这种模式中,组件会接收某个函数作为其子组件,然后在渲染函数中以 props.children 进行调用:
import React, { Component, PropTypes } from 'react'
import fetchUser from 'twitter'
class Twitter extends Component {
state = {
user: null,
}
static propTypes = {
username: PropTypes.string.isRequired,
}
componentDidMount () {
fetchUser(this.props.username)
.then((user) => this.setState({user}))
}
render () {
return this.props.children(this.state.user)
}
}
这种模式的优势在于将父组件与子组件解耦和,父组件可以直接访问子组件的内部状态而不需要再通过 Props 传递,这样父组件能够更为方便地控制子组件展示的 UI 界面。
譬如产品经理让我们将原本展示的 Badge 替换为 Profile,我们可以轻易地修改下回调函数即可:
<Twitter username='tylermcginnis33'>
{(user) => user === null
? <Loading />
: <Profile info={user} />}
</Twitter>
.
如果你创建了类似于下面的 Twitter 元素,那么它相关的类定义是啥样子的?的更多相关文章
- Js/如何操作div下面的span元素或者是img之类的标签元素
$("div[name='MatTypeName']").click(function (e) { $("div[name='MatTypeName']").e ...
- Java:concurrent包下面的Collection接口框架图( CopyOnWriteArraySet, CopyOnWriteArrayList,ConcurrentLinkedQueue,BlockingQueue)
Java集合大致可分为Set.List和Map三种体系,其中Set代表无序.不可重复的集合:List代表有序.重复的集合:而Map则代表具有映射关系的集合.Java 5之后,增加了Queue体系集合, ...
- [原创]使用GCC创建 Windows NT 下的内核DLL
原文链接:使用GCC创建 Windows NT 下的内核DLL 在温习<<Windows 2000 Driving>>分层驱动程序一章的时候,看到了关于紧耦合驱动连接方式,这种 ...
- webkit下面的CSS设置滚动条
webkit下面的CSS设置滚动条 1.主要有下面7个属性: ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端 ...
- jquery如何实现点击LI标签和下面的LI互换顺序? 超简单代码
转: jquery如何实现点击LI标签和下面的LI互换顺序? 上面的效果涉及jquery的两个方法: next() : 获得匹配元素集合中每个元素紧邻的下一个同胞元素. after() :在被选元 ...
- Linux下面的yum命令详解
yum(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及SUSE中的Shell前端软件包管理器.基於RPM包管理,能够从指定的服务器自动下载RP ...
- Spring下面的@Transactional注解的讲解
摘自: https://www.cnblogs.com/xiohao/p/4808088.html Spring下面的@Transactional注解标志的讲解 最近在开发中对Spring中的事务标记 ...
- jdk8下面的ArrayList的扩容
一. ArrayList class ArrayList<E> extends AbstractList<E> implements List<E>, Random ...
- 移动web在ios和android下点击元素出现阴影问题
移动web开发经验总结 1.-webkit-tap-highlight-color:rgba(255,255,255,0)可以同时屏蔽ios和android下点击元素时出现的阴影.备注:transp ...
随机推荐
- Redis只作为缓存,不做持久化的配置
#1.配置缓存内存限制和清理策略 #作为缓存服务器,如果不加以限制内存的话,就很有可能出现将整台服务器内存都耗光的情况,可以在redis的配置文件里面设置: #example: # 限定最多使用1.5 ...
- [C++] Pure Virtual Function and Abstract Class
Pure Virtual Function Abstract Class
- JMS 之 Active MQ的安全机制
一.认证 认证(Authentication):验证某个实体或者用户是否有权限访问受保护资源. MQ提供两种插件用于权限认证:(一).Simple authentication plug-in:直接把 ...
- 白盒测试实践项目(day6)
胡俊辉负责JUint测试部分,了解JUint测试的方法,并对其他成员介绍JUint的使用,负责JUnit部分相关文档的编写,负责博客园博客的维护,负责小组成员的任务分类与管理. 李建文负责代码复审部分 ...
- [GO]结构体指针变量初始化
package main import "fmt" func main() { type student struct { id int name string sex byte ...
- php 导出csv表格文件
1.数据库取出数据,存放在二维数组中 $conn=new mysqli('localhost','root','root','myDBPDO'); $result=$conn->query('s ...
- mybatis 插入实体与数据库中的字段不一致的解决方案
1.建立一个实体类 public class Student { private Integer id; private String name; private Double salary; pub ...
- .NET基础 (07)异常的处理
异常的处理1 如何针对不同的异常进行捕捉2 如何使用Conditional特性3 如何避免类型转换时的异常 异常的处理 1 如何针对不同的异常进行捕捉 C#中一个try块可以有多个catch块,每个c ...
- .NET基础 (06)面向对象的实现
面向对象的实现1 C#中类可以有多个父类.可以实现多个接口吗2 简述C#中重写.重载和隐藏的概念3 为什么在构造方法中调用虚方法会导致问题4 在C#中如何声明一个类不能被继承 面向对象的实现 1 C# ...
- WCF服务编程 读书笔记——第1章 WCF基础(1)
第1章 WCF基础 本章主要介绍WCF的基本概念.构建模块以及WCF体系架构,以指导读者构建一个简单的WCF服务.从本章的内容中,我们可以了解到WCF的基本术语,包括地址(Address).绑定(Bi ...