详解React的回调渲染模式


Posted in Javascript onSeptember 10, 2020

一、一个简单的小例子

1.父组件

<Twitter username='tylermcginnis33'>
 {(user) => user === null
  ? <Loading />
  : <Badge info={user} />}
</Twitter>

2.子组件框架

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
}

3.子组件具体实现

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>

到此这篇关于详解React的回调渲染模式的文章就介绍到这了,更多相关React 回调渲染内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript获取onclick、onchange等事件值的代码
Jul 22 Javascript
JS取request值以及自动执行使用示例
Feb 24 Javascript
Javascript中this关键字的一些小知识
Mar 15 Javascript
基于javascript实现彩票随机数生成(简单版)
Apr 17 Javascript
Boostrap入门准备之border box
May 09 Javascript
第八篇Bootstrap下拉菜单实例代码
Jun 21 Javascript
js 自带的 map() 方法全面了解
Aug 16 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
Nov 24 Javascript
angular实现IM聊天图片发送实例
May 08 Javascript
node通过npm写一个cli命令行工具
Oct 12 Javascript
基于JS实现table导出Excel并保留样式
May 19 Javascript
Bootstrap FileInput实现图片上传功能
Jan 28 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
Sep 10 #Javascript
关于JavaScript数组去重的一些理解汇总
Sep 10 #Javascript
vue中jsonp插件的使用方法示例
Sep 10 #Javascript
vue 实现一个简单的全局调用弹窗案例
Sep 10 #Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
Sep 10 #Javascript
vue 使用lodash实现对象数组深拷贝操作
Sep 10 #Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
Sep 10 #Javascript
You might like
一个PHP日历程序
2006/12/06 PHP
PHP中操作ini配置文件的方法
2013/04/25 PHP
php防止CC攻击代码 php防止网页频繁刷新
2015/12/21 PHP
javascript 添加和移除函数的通用方法
2009/10/20 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
2014/06/09 Javascript
NodeJS Web应用监听sock文件实例
2015/02/18 NodeJs
javascript中的正则表达式使用指南
2015/03/01 Javascript
基于jQuery日历插件制作日历
2016/03/11 Javascript
js中class的点击事件没有效果的解决方法
2016/10/13 Javascript
js封装tab标签页实例分享
2016/12/19 Javascript
利用 spin.js 生成等待效果(js 等待效果)
2017/06/25 Javascript
AngularJS中的路由使用及实现代码
2017/10/09 Javascript
浅谈Vue-cli 命令行工具分析
2017/11/22 Javascript
详解ES7 Decorator 入门解析
2019/02/18 Javascript
移动端JS实现拖拽两种方法解析
2020/10/12 Javascript
jQuery实现放大镜案例
2020/10/19 jQuery
vue 获取到数据但却渲染不到页面上的解决方法
2020/11/19 Vue.js
Django在Win7下的安装及创建项目hello word简明教程
2014/07/14 Python
Python中一些自然语言工具的使用的入门教程
2015/04/13 Python
python脚本监控docker容器
2016/04/27 Python
Python实现SMTP发送邮件详细教程
2021/03/02 Python
解决python3 安装完Pycurl在import pycurl时报错的问题
2018/10/15 Python
python中正则表达式与模式匹配
2019/05/07 Python
详解pytorch 0.4.0迁移指南
2019/06/16 Python
python英语单词测试小程序代码实例
2019/09/09 Python
opencv python Canny边缘提取实现过程解析
2020/02/03 Python
浅谈Python中的字符串
2020/06/10 Python
Python爬虫获取豆瓣电影并写入excel
2020/07/31 Python
香港永安旅游网:Wing On Travel
2017/04/10 全球购物
汽车专业毕业生推荐信
2013/11/12 职场文书
坎儿井导游词
2015/02/09 职场文书
2016年班主任新年寄语
2015/08/18 职场文书
pytest进阶教程之fixture函数详解
2021/03/29 Python
青岛市的收音机研制与生产
2022/04/07 无线电
JS class语法糖的深入剖析
2022/07/07 Javascript
Win11 Build 22000.829更新补丁KB5015882发布(附更新修复内容汇总)
2022/07/15 数码科技