render props的运用
术语 “render prop” 是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术
通常的 这个值为函数的prop 拥有相同的一些参数和逻辑
例如 我们有一个 toggle button 点击按钮时显示当前一些特殊内容 这个功能在许多组件中都要用到
普通情况下 如果我们不做处理 可能需要在每个组件里写如下一段代码
import React, { Component } from 'react' export default class Toggle extends Component {
state = {
on:false,
} toggle = () => {
this.setState({
on:!this.state.on
})
}
render() {
return (
<div className={toggleStyle}>
{
this.state.on && (
<h1>我是蓝胖</h1>
)
}
<button onClick={this.toggle}>显示/隐藏</button>
</div>
)
}
} const toggleStyle = {
background:"red"
}
这是一段简单的逻辑和功能 区别是 每个组件要渲染的内容都不一样
如果有这种需求 render props 是非常合适的
首先 写一个组件
调用这个组件的时候 传入一个render 方法 接受3个参数 返回一段jsx
在组件中 执行传入的render方法 并传入需要的参数
页面上显示了我们指定的内容
同样的我们再写一个组件 在Toggle1中也传入 一个叫propChild的方法 这个方法跟上一个组件的render一模一样
所以render props其实只是一个叫法 它其实指的是这一类的prop 你可以改成任何名字 不一定非要叫render
第二个组件中 传入不一样的参数
可以看到 我们可以用render props 进行代码复用
render props的运用的更多相关文章
- React-代码复用(mixin.hoc.render props)
前言 最近在学习React的封装,虽然日常的开发中也有用到HOC或者Render Props,但从继承到组合,静态构建到动态渲染,都是似懂非懂,索性花时间系统性的整理,如有错误,请轻喷~~ 例子 以下 ...
- React Render Props 模式
概述 Render Props模式是一种非常灵活复用性非常高的模式,它可以把特定行为或功能封装成一个组件,提供给其他组件使用让其他组件拥有这样的能力,接下来我们一步一步来看React组件中如何实现这样 ...
- 可复用 React 的 HOC 以及的 Render Props
重复是不可能的,这辈子都不可能写重复的代码 当然,这句话分分钟都要被产品(领导)打脸,真的最后一次改需求,我们烦恼于频繁修改的需求 虽然我们不能改变别人,但我们却可以尝试去做的更好,我们需要抽象,封装 ...
- [React] Use Prop Collections with Render Props
Sometimes you have common use cases that require common props to be applied to certain elements. You ...
- [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 ...
- React 之 render props 的理解
1.基本概念 在调用组件时,引入一个函数类型的 prop,这个 prop定义了组件的渲染方式. 2.回调渲染 回顾组件通信的几种方式 父-> 子 props 子-> 父 回调.消息通道 任 ...
- React高阶组件 和 Render Props
高阶组件 本质 本质是函数,将组件作为接收参数,返回一个新的组件.HOC本身不是React API,是一种基于React组合的特而形成的设计模式. 解决的问题(作用) 一句话概括:功能的复用,减少代码 ...
- React中render Props模式
React组件复用 React组件复用的方式有两种: 1.render Props模式 2.高阶组件HOC 上面说的这两种方式并不是新的APi. 而是利用Raect自身的编码特点,演化而来的固定编码写 ...
- 学习React系列(十)——Render Props
解决问题:将行为封装,供多个组件使用(在多个组件之间分享某段代码) 组件中的props属性中包含一个"render"属性(该属性为一个返回值为元素的方法),然后在该组件的rende ...
随机推荐
- MyCat垂直分库
一.什么是垂直分库 将一类功能的表从一个实例切分到另一个实例,横向扩展实例,增加写负载 目标:将1个实例的4类表拆分多4个实例中 二.垂直切分步骤 2.1收集分析业务模块间的关系,能分几个库 2.2全 ...
- 实验十四 Swing图形界面组件
实验十四 Swing图形界面组件 实验时间 20178-11-29 1.实验目的与要求 (1) 掌握GUI布局管理器用法: (2) 掌握各类Java Swing组件用途及常用API: 2.实验内容和 ...
- LightOJ1197
题目链接:https://vjudge.net/problem/LightOJ-1197 题目大意: 给你 a 和 b (1 ≤ a ≤ b < 231, b - a ≤ 100000),求出 ...
- Unity调用Android Studio中的Java方法
1. 新建Unity项目: 2. Android Studio中新建EmptyActivity: 3. 新建安卓项目时记住最小版本号: 4. 将左侧项目文件浏览面板切换到Project项下,在本项根节 ...
- 【Java8新特性】面试官:谈谈Java8中的Stream API有哪些终止操作?
写在前面 如果你出去面试,面试官问了你关于Java8 Stream API的一些问题,比如:Java8中创建Stream流有哪几种方式?(可以参见:<[Java8新特性]面试官问我:Java8中 ...
- [Unity2d系列教程] 002.引用外部DLL - C
上一篇我们学习了Unity调用C#生成的外部DLL,但是有时候我们需要访问底层,不能不适用C生成的DLL.下面就让我们一起学习下,C如何生成. 1.创建一个C的控制台程序 2.点击确定->点击下 ...
- [256个管理学理论]004.鲶鱼效应(Catfish Effect)
鲶鱼效应(Catfish Effect) 来自于大洋彼岸的让你看不懂的解释: 鲶鱼效应(Catfish Effect):鲶鱼在搅动小鱼生存环境的同时,也激活了小鱼的求生能力.鲶鱼效应是采取一种手段或措 ...
- 图解MySQL索引(二)—为什么使用B+Tree
失踪人口回归,近期换工作一波三折,耽误了不少时间,从今开始每周更新~ 索引是一种支持快速查询的数据结构,同时索引优化也是后端工程师的必会知识点.各个公司都有所谓的MySQL"军规" ...
- 舵机MX-64AR与MX-28AR驱动
背景:硬件采用485通信,在tb上采购的无需收发控制的串口转RS485模块(485通信为半双工,一般情况需要控制收发模式).在使用该模块后,即可完全使用一个普通地串口来对485通信的舵机进行操作. 模 ...
- Beta冲刺——测试随笔
这个作业属于哪个课程 软件工程 这个作业要求在哪里 团队作业第五次--Beta冲刺 这个作业的目标 Beta冲刺 作业正文 正文 github链接 项目地址 其他参考文献 无 一.测试工作安排 项目 ...