[React] Use Prop Collections with Render Props
Sometimes you have common use cases that require common props to be applied to certain elements. You can collect these props into an object for users to simply apply to their elements and we'll see how to do that in this lesson.
In short, in Render props partten, you can provide an Object, which contains all the necessary common used props or functions. Then users can just use this single object to multi elements.
// prop collections import React from 'react'
import {Switch} from '../switch' class Toggle extends React.Component {
state = {on: false}
toggle = () =>
this.setState(
({on}) => ({on: !on}),
() => this.props.onToggle(this.state.on),
)
getStateAndHelpers() {
return {
on: this.state.on,
toggle: this.toggle,
togglerProps: {
'aria-pressed': this.state.on,
onClick: this.toggle,
},
}
}
render() {
return this.props.children(this.getStateAndHelpers())
}
} function Usage({
onToggle = (...args) => console.log('onToggle', ...args),
}) {
return (
<Toggle onToggle={onToggle}>
{({on, togglerProps}) => (
<div>
<Switch on={on} {...togglerProps} />
<hr />
<button aria-label="custom-button" {...togglerProps}>
{on ? 'on' : 'off'}
</button>
</div>
)}
</Toggle>
)
}
Usage.title = 'Prop Collections' export {Toggle, Usage as default}
TogglerProps is the object we are talking about, it collect all the necessary common used props and functions send by to Render Prop, then this can be used for both <Switch> and <button>
An advantage of using role="button" is that it allows the creation of toggle buttons. A toggle button can have two states: pressed and not pressed. Whether a button is a toggle button or not can be indicated with the
aria-pressed
attribute in addition to thebutton
role:
- If
aria-pressed
is not used the button is not a toggle button.- If
aria-pressed="false"
is used the button is a toggle button that is currently not pressed.- If
is used the button is a toggle button that is currently pressed.
aria-pressed="true"
- if
aria-pressed="mixed"
is used, the button is considered to be partially pressed.
[React] Use Prop Collections with Render Props的更多相关文章
- 可复用 React 的 HOC 以及的 Render Props
重复是不可能的,这辈子都不可能写重复的代码 当然,这句话分分钟都要被产品(领导)打脸,真的最后一次改需求,我们烦恼于频繁修改的需求 虽然我们不能改变别人,但我们却可以尝试去做的更好,我们需要抽象,封装 ...
- React高阶组件 和 Render Props
高阶组件 本质 本质是函数,将组件作为接收参数,返回一个新的组件.HOC本身不是React API,是一种基于React组合的特而形成的设计模式. 解决的问题(作用) 一句话概括:功能的复用,减少代码 ...
- 学习React系列(十)——Render Props
解决问题:将行为封装,供多个组件使用(在多个组件之间分享某段代码) 组件中的props属性中包含一个"render"属性(该属性为一个返回值为元素的方法),然后在该组件的rende ...
- React-代码复用(mixin.hoc.render props)
前言 最近在学习React的封装,虽然日常的开发中也有用到HOC或者Render Props,但从继承到组合,静态构建到动态渲染,都是似懂非懂,索性花时间系统性的整理,如有错误,请轻喷~~ 例子 以下 ...
- React Render Props 模式
概述 Render Props模式是一种非常灵活复用性非常高的模式,它可以把特定行为或功能封装成一个组件,提供给其他组件使用让其他组件拥有这样的能力,接下来我们一步一步来看React组件中如何实现这样 ...
- React 之 render props 的理解
1.基本概念 在调用组件时,引入一个函数类型的 prop,这个 prop定义了组件的渲染方式. 2.回调渲染 回顾组件通信的几种方式 父-> 子 props 子-> 父 回调.消息通道 任 ...
- React中render Props模式
React组件复用 React组件复用的方式有两种: 1.render Props模式 2.高阶组件HOC 上面说的这两种方式并不是新的APi. 而是利用Raect自身的编码特点,演化而来的固定编码写 ...
- [Recompose] Refactor React Render Props to Streaming Props with RxJS and Recompose
This lesson takes the concept of render props and migrates it over to streaming props by keeping the ...
- render props的运用
2020-04-03 render props的运用 术语 “render prop” 是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术 通常的 这个值为函数的prop ...
随机推荐
- win7 快捷键 收集
1. 轻松访问键盘快捷方式 按住右 Shift 八秒钟:启用和关闭筛选键 按左 Alt + 左 Shift + PrtScn (或 PrtScn):启用或关闭高对比度 按左 Alt + 左 Shift ...
- Android(java)学习笔记195:ContentProvider使用之添加数据到联系人(掌握)
1.添加联系人逻辑思路 (1)首先在raw_contacts创建一个新的id (2)在data表里面添加这个id对应的数据 2.下面通过一个案例,说明一下如何添加一条数据到联系人: (1)首先我们关注 ...
- LeetCode137只出现一次的数字——位运算
题目 题目描述:给定一个非空整数数组,除了某个元素只出现一次以外,其余每个元素均出现三次.找出那个只出现一次的元素. 说明:你的算法应该具有线性时间的复杂度.你可以不使用额外的空间来实现吗? 思路 题 ...
- comm - 逐行比较两个已排序的文件
总览 (SYNOPSIS) ../src/comm [OPTION]... LEFT_FILE RIGHT_FILE 描述 (DESCRIPTION) 逐行比较 已排序的 文件 LEFT_FILE 和 ...
- zabbix4.2学习笔记--用自带的mysql监控模块
这里演示监控zabbix本身用到的mysql 第一步:建立mysql监控用户 在生产环境中,出于安全考虑,建议监控客户端数据库时,单独配置一个查询权限用户做查询操作即可 # 撤掉安装时给予的分配单个数 ...
- Android图像处理之Bitmap类(1)
Bitmap是Android系统中的图像处理的最重要类之一.用它可以获取图像文件信息,进行图像剪切.旋转.缩放等操作,并可以指定格式保存图像文件.本文从应用的角度,着重介绍怎么用Bitmap来实现这些 ...
- Linux安装64位Mysql5.7.22
以安装在/usr/local目录下为例 1.下载安装包地址:https://dev.mysql.com/downloads/file/?id=476936,安装包保存到/usr/local 2.解压: ...
- 原生js上传图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js 技巧 (十)广告JS代码效果大全 【2】
2.[鼠标感应] 与前面一个代码不同的是,当鼠标移动到广告图片上是可以感应显示另外设置好的广告大图效果,下面就是实现效果所需代码: function bigshow(){ docume ...
- Python之模块和包的创建与使用
一.模块的概念 在计算机的开发过程中,随着程序代码越写越多,在一个文件里代码就越来越长,越来越不容易维护. 为了编写可维护的代码,我们把很多函数分组,放在不同的文件里面,这样,每个文件包含的代码就相对 ...