React Render Callback Pattern(渲染回调模式)
React Render Callback Pattern,渲染回调模式,其实是将this.props.children当做函数来调用。
例如:
要根据user参数确定渲染Loading还是Profile组件
const App = () => {
return (
<div>
<FieldItem username='magalhini'>
{user => user === null
? <Loading />
: <Profile info={user} />}
</FieldItem>
</div>
);
};
Render Callback Pattern的做法是:
class FieldItem extends React.Component {
state = { user: null } componentDidMount() {
// We can make an ajax call here, for e.g.
setTimeout(() => this.setState({
user: `I have now fulfilled something for ${this.props.username}`
}), 1500);
} render() {
// Render the children with a function using state as the argument
return this.props.children(this.state.user);
}
}
关键是这句 this.props.children(this.state.user),将this.props.chilren当做函数,将user作为参数传入。
完整代码如下:
// Loading component
const Loading = () => <p>Loading...</p>; // Profile component
const Profile = (props) => <p>{props.info}</p>; const App = () => {
return (
<div>
<h3>An application</h3>
<FieldItem username='magalhini'>
{user => user === null
? <Loading />
: <Profile info={user} />}
</FieldItem>
</div>
);
}; class FieldItem extends React.Component {
state = { user: null } componentDidMount() {
// We can make an ajax call here, for e.g.
setTimeout(() => this.setState({
user: `I have now fulfilled something for ${this.props.username}`
}), 1500);
}
render() {
// Render the children with a function using state as the argument
return this.props.children(this.state.user);
}
} ReactDOM.render(<App/>, document.getElementById('app'));
出处:http://blog.ricardofilipe.com/post/react-callback-render-pattern
React Render Callback Pattern(渲染回调模式)的更多相关文章
- JavaScript:回调模式(Callback Pattern) (转载)
JavaScript:回调模式(Callback Pattern) 函数就是对象,所以他们可以作为一个参数传递给其它函数: 当你将introduceBugs()作为一个参数传递给writeCode() ...
- JavaScript学习笔记(十二) 回调模式(Callback Pattern)
函数就是对象,所以他们可以作为一个参数传递给其它函数: 当你将introduceBugs()作为一个参数传递给writeCode(),然后在某个时间点,writeCode()有可能执行(调用)intr ...
- JavaScript:回调模式(Callback Pattern)
函数就是对象,所以他们可以作为一个参数传递给其它函数: 当你将introduceBugs()作为一个参数传递给writeCode(),然后在某个时间点,writeCode()有可能执行(调用)intr ...
- 腾讯优测优分享 | 探索react native首屏渲染最佳实践
腾讯优测是专业的移动云测试平台,旗下的优分享不定时提供大量移动研发及测试相关的干货~ 此文主要与以下内容相关,希望对大家有帮助. react native给了我们使用javascript开发原生app ...
- 探索react native首屏渲染最佳实践
文 / 腾讯 龚麒 0.前言 react native给了我们使用javascript开发原生app的能力,在使用react native完成兴趣部落安卓端发现tab改造后,我们开始对由react n ...
- React.render和reactDom.render的区别
刚开始学习react.js.发现网上的资料,有些是写着react.render,有些写着reactDom.render.觉得很奇怪就查阅了一下资料.解释如下: 这个是react最新版api,也就是0. ...
- React Canvas:高性能渲染 React 组
React Canvas 提供了使用 Canvas 渲染移动 Web App 界面的能力,替代传统的 DOM 渲染,具有更接近 Native App 的使用体验.React Canvas 提供了一组标 ...
- rpyc 回调模式工作不正常
rpyc 回调模式工作不正常 最近使用了 rpyc 来处理一个多节点间的文件同步的任务,目标是使用 rpyc 来实现简单的 p2p 文件传输机制,以减少单点负载和单点失败对传输的影响. 和 p2p 的 ...
- ReactDom.render和React.render的区别
这个是react最新版api,也就是0.14版本做出的改变.主要是为了使React能在更多的不同环境下更快.更容易构建.于是把react分成了react和react-dom两个部分.这样就为web版的 ...
随机推荐
- 「日常训练&知识学习」单调栈
这几天的知识学习比较多,因为时间不够了.加油吧,为了梦想. 这里写几条简单的单调栈作为题解记录,因为单调栈的用法很简单,可是想到并转化成用这个需要一些题目的积淀. 相关博客参见:https://blo ...
- 「Python」Numpy equivalent of MATLAB's cell array
转自Stackoverflow.备忘用. Question I want to create a MATLAB-like cell array in Numpy. How can I accompli ...
- hdu1051 Wooden Sticks(贪心+排序,逻辑)
Wooden Sticks Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Tot ...
- Python入门编程中的变量、字符串以及数据类型
//2018.10.10 字符串与变量 1. 在输出语句中如果需要出现单引号或者双引号,可以使用转义符号\,它可以将其中的歧义错误解释化解,使得输出正常: 2. 对于python的任何变量都需要进行赋 ...
- 【input】输入框组件说明
input输入框组件 原型: <input value="[String]" type="[text | number | idcard | digit]" ...
- python程序设计——文件操作
分类 1.文本文件 存储常规字符串,由若干文本行组成,每行以换行符'\n'结尾 2.二进制文件 把对象以字节串存储,常见的图形图像.可执行文件.数据库文件office文档等 #创建文件 >> ...
- JS判断是IOS还是Android以及如何解决h5打包后在ios下内容与状态栏重叠问题
h5打包后在ios下内容与状态栏重叠问题: 1:知道设备的类型: var u = navigator.userAgent, app = navigator.appVersion; var isAndr ...
- html+css基础 - 个人备忘录
//======================html部分===================// 表现内容<meta http-equiv="Content-Type" ...
- 【week6】用户数
小组名称:nice! 小组成员:李权 于淼 杨柳 刘芳芳 项目内容:约跑app alpha发布48小时以后用户数如何,是否达到预期目标,为什么,是否需要改进,如何改进(或理性估算). 首先我们的app ...
- C# 知识回顾 - 匿名方法
C# 基础回顾 - 匿名方法 目录 简介 匿名方法的参数使用范围 委托示例 简介 在 C# 2.0 之前的版本中,我们创建委托的唯一形式 -- 命名方法. 而 C# 2.0 -- 引进了匿名方法,在 ...