如果你创建了类似于下面的 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 ...
随机推荐
- windows 查看端口被占用进程
查看占用63243是谁 C:\Users\Administrator>netstat -aon|findstr "63243" TCP 172.27.33.11:63243 ...
- linux之shell编程初步
#################适用于CentOS6################## #!/bin/bash ########################################## ...
- fastdfs 上传和下载 有用
一.FastDFS解决什么样的问题 1.存储空间可扩展. 2.提供一个统一的访问方式. 使用FastDFS,分布式文件系统.存储空间可以横向扩展,可以实现服务器的高可用.支持每个节点有备份机. 二.什 ...
- SpringBoot自定义拦截器实现
1.编写拦截器实现类,此类必须实现接口 HandlerInterceptor,然后重写里面需要的三个比较常用的方法,实现自己的业务逻辑代码 如:OneInterceptor package com ...
- Git blame
一.简介 git blame可以将文件中的每一行的作者.最新的变更提交和提交时间展示出来. 二.实例 http://blog.csdn.net/hudashi/article/details/76 ...
- 冲刺NOIP2015提高组复赛模拟试题(五)1.数学作业
1. 数学作业 [问题描述] 路人丙的数学老师非常乏力,他喜欢出一些非常乏力的数学题来为难乏力的学生们.这次数学老师布置了一堆的数学题作为作业,而且这些数学题有个共同的特点是都求C(N,M)中不同质因 ...
- ceph之osd
一.删除osd ceph osd out 1ceph osd down 1systemctl stop ceph-osd@1ceph osd crush remove osd.1ceph osd rm ...
- Spring框架总结(五)
自动装配(了解) 根据名称自动装配:autowire="byName" 自动去IOC容器中找与属性名同名的引用的对象,并自动注入 延续使用user.dao.service.acti ...
- Acrobat_8_Pro_SC 激活老是提示你输入的授权码无效
假如安装了Adobe Acrobat Professional 8 的时候无法激活, 或在恢复安装时 Adobe Acrobat Professional 8 需要重新激活, 激活的时候,总是提示你输 ...
- jmeter -分布式性能测试部署
------------------运行环境:------------------------------------------------- 1. 安装java运行环境:要求jdk1.8(最好安装 ...