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 the button 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 aria-pressed="true" is used the button is a toggle button that is currently pressed.
  • if aria-pressed="mixed" is used, the button is considered to be partially pressed.

[React] Use Prop Collections with Render Props的更多相关文章

  1. 可复用 React 的 HOC 以及的 Render Props

    重复是不可能的,这辈子都不可能写重复的代码 当然,这句话分分钟都要被产品(领导)打脸,真的最后一次改需求,我们烦恼于频繁修改的需求 虽然我们不能改变别人,但我们却可以尝试去做的更好,我们需要抽象,封装 ...

  2. React高阶组件 和 Render Props

    高阶组件 本质 本质是函数,将组件作为接收参数,返回一个新的组件.HOC本身不是React API,是一种基于React组合的特而形成的设计模式. 解决的问题(作用) 一句话概括:功能的复用,减少代码 ...

  3. 学习React系列(十)——Render Props

    解决问题:将行为封装,供多个组件使用(在多个组件之间分享某段代码) 组件中的props属性中包含一个"render"属性(该属性为一个返回值为元素的方法),然后在该组件的rende ...

  4. React-代码复用(mixin.hoc.render props)

    前言 最近在学习React的封装,虽然日常的开发中也有用到HOC或者Render Props,但从继承到组合,静态构建到动态渲染,都是似懂非懂,索性花时间系统性的整理,如有错误,请轻喷~~ 例子 以下 ...

  5. React Render Props 模式

    概述 Render Props模式是一种非常灵活复用性非常高的模式,它可以把特定行为或功能封装成一个组件,提供给其他组件使用让其他组件拥有这样的能力,接下来我们一步一步来看React组件中如何实现这样 ...

  6. React 之 render props 的理解

    1.基本概念 在调用组件时,引入一个函数类型的 prop,这个 prop定义了组件的渲染方式. 2.回调渲染 回顾组件通信的几种方式 父-> 子 props 子-> 父 回调.消息通道 任 ...

  7. React中render Props模式

    React组件复用 React组件复用的方式有两种: 1.render Props模式 2.高阶组件HOC 上面说的这两种方式并不是新的APi. 而是利用Raect自身的编码特点,演化而来的固定编码写 ...

  8. [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 ...

  9. render props的运用

    2020-04-03 render props的运用 术语 “render prop” 是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术 通常的 这个值为函数的prop ...

随机推荐

  1. vue获取dom元素高度的方法

    获取高度: <div ref="自定义名称" > </div>要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作!!! mo ...

  2. iTOP-6818开发板设置NFS共享目录的实现

    NFS 共享目录的制作过程.主要分为两个步骤:1.搭建 NFS 服务器2.配置内核. NFS 是 Network FileSystem 的缩写,是由 SUN 公司研制的 UNIX 表示层协议(pres ...

  3. CREATE CONVERSION - 定义一个用户定义的码制转换

    SYNOPSIS CREATE [DEFAULT] CONVERSION name FOR source_encoding TO dest_encoding FROM funcname DESCRIP ...

  4. iis如何在dos中注册

    iis如何在dos中注册   2009-09-23 08:13 提问者采纳   cd \cd c:\windows\microsoft.net\framework\v2.0.50727aspnet_r ...

  5. get data from splunk

    link: http://dev.splunk.com/view/python-sdk/SP-CAAAER5 download SDK & setup with python code: im ...

  6. 获取url上的参数

    var aa = '?name=hss&age=13';        function strToObj(str){            if(typeof str === 'undefi ...

  7. Android自动化测试之Monkey

    本来是做Web后端的,来公司实习变成微信小程序前端了,到这周变成Android APP测试人员了,也是微醺啊. 由于对手工测试终究是有些抵触,所有昨天小试了一下不用写代码的自动化压力测试,在此记下我的 ...

  8. Web项目ConcurrentModificationException异常

    后台SSH在做Session删除的时候,遇到了ConcurrentModificationException异常. 参考资料:http://blog.csdn.net/idesvo/article/d ...

  9. vue hash模式和404页面的配置

    1.设置我们的路由配置文件(/src/router/index.js): { path:'*', component:Error } 这里的path:’*’就是找不到页面时的配置,component是 ...

  10. 级数求和(C++)

    题目描述 已知:Sn​=1+1/2+1/3+…+1/n.显然对于任意一个整数K,当n足够大的时候,Sn​大于K. 现给出一个整数K(1≤K≤15),要求计算出一个最小的n:使得Sn​>K. 输入 ...