[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 ...
随机推荐
- 【原创】webbluetoorh 在windows下无法显示搜索列表,在mac下正常的解决办法
google webbluetooth在windows下不能弹出设备搜索列表提示“Web Bluetooth API is not available”,因为webbluetooth是google新推 ...
- mathAge.call(btn) 函数call 改变函数内 this #js
mathAge.call(btn) 函数call 改变函数内 this
- 【转】MFC 自定义edit 限制输入十六进制内容 响应复制粘贴全选剪切的功能
参考地址:MFC 自定义edit 限制输入内容 响应复制粘贴全选剪切的功能 Ctrl组合键ASCII码 ^Z代表Ctrl+z ASCII值 控制字符 AS ...
- sql server使用的注意点及优化点 自备
1.字符类型建议采用varchar/nvarchar数据类型,并且禁止使用varchar(max).nvarchar(max) 2.金额货币建议采用money数据类型 (*) 3.自增长标识建议采用 ...
- mysql图形化工具获取表的源码
打开数据库,选择要查看的表,点击右键>对象信息>DDL:
- Java中的JVM的内存结构
Java的虚拟机自身结构图: JVM内存结构主要包括两个子系统和两个组件.两个子系统分别是Classloader子系统和Executionengine(执行引擎)子系统:两个组件分别是Runtimed ...
- ORACLE中DBMS_SQL的用法
ORACLE中DBMS_SQL的用法 对于一般的select操作,如果使用动态的sql语句则需要进行以下几个步骤: open cursor---> parse---> define ...
- centos7配置静态IP步骤
centos7按照初始安装时候的developer类型一路装好,在vmware里已经设置为bridge模式,按理说是会自动按照DHCP联网成功的,结果却发现连网卡都没有激活,这里记录下. 1:我要把L ...
- 笔试算法题(13):反转链表 & 左旋转字符串
出题:反转链表(递归和非递归解法): 分析:有递归跟非递归实现,注意对原始链表头节点的处理,因为其他节点都指向下一个节点,其需要指向NULL: 解题: struct Node { int v; Nod ...
- Go:方法
一.基本介绍 在某些情况下,我们需要定义方法.比如 Person 结构体,除了有一些字段外(姓名.年龄...),还可以有一些行为动作(吃.唱歌...),这就需要用方法才能实现. Go中的方法是作用在指 ...