React@16.x(16)Render Props

目录

  • 1,问题描述
  • 2,解决方式
    • 2.1,Render Props
    • 2.2,HOC
  • 3,使用场景

1,问题描述

当使用组件时,标签中的内容,会被当做 props.children 来渲染:

子组件:

import React, { PureComponent } from "react";export default class MyComponent extends PureComponent {state = {x: 0,y: 0,};render() {return <div>{this.props.children}</div>;}
}

父组件使用:

import React from "react";
import MyComponent from "./MyComponent";export default function index() {return (<div><MyComponent><h2>1次使用</h2></MyComponent><MyComponent><h2>2次使用</h2></MyComponent></div>);
}

现在的需求:父组件中如何使用子组件的状态?

2,解决方式

2.1,Render Props

注意到在子组件中默认渲染的是 props.children,那如果像上下文 <ctx.Consumer></ctx.Consumer> 一样,通过函数参数来传递指定内容,就可以解决了。

所以,props.children 变成函数即可

import React, { PureComponent } from "react";export default class MyComponent extends PureComponent {state = {x: 1,y: 2,};render() {return <div>{this.props.children(this.state)}</div>;}
}

使用

import React from "react";
import MyComponent from "./MyComponent";export default function index() {return (<div><MyComponent>{(childrenState) => <h2>{childrenState.x}</h2>}</MyComponent><MyComponent>{(childrenState) => <h2>{childrenState.y}</h2>}</MyComponent></div>);
}

另外,一般这种情况不会用 props.children,而是使用约定俗成的 props.render 来表示。

// 子组件
<div>{this.props.render(this.state)}</div>;// 父组件
<MyComponent render={(childrenState) => <h2>{childrenState.x}</h2>} />

注意,因为子组件 extends PureComponent,所以父组件应该将这个函数单独声明才行,否则每次都会重新渲染。(具体原因看这篇文章)

修改父组件如下:

import React from "react";
import MyComponent from "./MyComponent";const renderA = (childrenState) => <h2>{childrenState.x}</h2>;export default function index() {return (<div><MyComponent render={renderA}></MyComponent></div>);
}

2.2,HOC

高阶组件也能解决这个问题,但相比 Render props 有点繁琐。

import React, { PureComponent } from "react";export default function withState(Comp) {return class MyComponent extends PureComponent {state = {x: 1,y: 2,};render() {return <Comp {...this.props} x={this.state.x} />;}};
}

父组件使用

import React from "react";
import withState from "./withState";function ChildA(props) {return <h2>{props.x}</h2>;
}const ChildStateA = withState(ChildA);export default function index() {return (<div><ChildStateA /></div>);
}

3,使用场景

可以看到,效果类似 vue中作用域插槽 。

所以大多的使用场景:某些组件的各个功能和处理逻辑相同,只是渲染的UI不同


以上。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/845950.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AI 学习神器!大学生必备的 22个 AI 提示词模板

AI 学习神器&#xff01;大学生必备的 22个 AI 提示词模板 博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘…

6. MySQL 查询、去重、别名

文章目录 【 1. 数据表查询 SELECT 】1.1 查询表中所有字段使用 * 查询表的所有字段列出表的所有字段 1.2 查询表中指定的字段 【 2. 去重 DISTINCT 】【 3. 设置别名 AS 】3.1 为表指定别名3.2 为字段指定别名 【 5. 限制查询结果的条数 LIMIT 】5.1 指定初始位置5.2 不指定初…

基于优化Morlet小波的一维信号瞬态特征提取方法(MATLAB R2018A)

小波分析方法近些年逐步得到发展的一门数学分析技术&#xff0c;它对许多学科都有十分重要的影响。与傅立叶变换等其他传统方法相比&#xff0c;小波分解的方法中所用的小波基有着多种多样的结构&#xff0c;总结来说又包括正交小波系与非正交小波系。正交小波在信号处理领域目…

自动化测试:selenium详解(建议收藏)

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 说到自动化测试&#xff0c;就不得不提大名鼎鼎的Selenium。Selenium 是如今最常用的自动化测试工…

系统思考—思考快与慢

“膝反射思考做决策&#xff0c;你的公司能走多远&#xff1f;” 在快节奏的商业环境中&#xff0c;我们的大脑往往默认采用“快速直觉反应”模式来做决策&#xff0c;这种方式节省能量&#xff0c;属于我们认知的“系统一”。然而&#xff0c;仅依靠直觉反应&#xff0c;即所…

cleanmyMac有必要吗,什么软件可以替代clean my mac

最近总有苹果用户抱怨mac电脑变得非常卡顿&#xff0c;而且总会收到“您的启动磁盘几乎已经满了”的系统提示。提示出现的原因是我们长期未对电脑进行健康扫描和深度清理导致的。遇到这种情况&#xff0c;我们可以借助专业的电脑深度清理软件——CleanMyMac X&#xff0c;清理不…

Django中使用Celery和APScheduler实现定时任务

在之前的文章我们已经学习了Celery和APScheduler的基本使用&#xff0c;下面让我们来了解一下如何在Django中使用Celery和APScheduler Celery 1.前提工作 python 3.7 pip install celery pip install eventlet #5.0版本以下 pip install importlib-metadata4.8.3&#xff08…

从功能性磁共振成像(fMRI)数据重建音频

听觉是人类最重要的感官之一&#xff0c;它负责接收外部的听觉刺激&#xff0c;并将这些信息传递给大脑进行处理和理解。研究人员正致力于从神经科学和计算机科学两个领域探索人脑的听觉感知机制。一个关键目标是从人脑中解码神经信息&#xff0c;并重建原始的刺激。常见的大脑…

【上海大学计算机组成原理实验报告】六、内存系统实验

一、实验目的 学习内存访问机制。理解代码和数据的分区存放原理和技术。 二、实验原理 根据实验指导书的相关内容&#xff0c;地址寄存器MAR用来存放要进行读或写的存储器EM的地址。其内容经数据总线DBUS写入&#xff0c;因此必须在数据总线上具有数据后&#xff0c;配合MAR允…

认识微服务,认识Spring Cloud

1. 介绍 本博客探讨的内容如下所示 什么是微服务&#xff1f;什么是springcloud&#xff1f;微服务和springcloud有什么关系&#xff1f; 首先&#xff0c;没有在接触springcloud之前&#xff0c;我写的项目都是单体结构&#xff0c; 但随着网站的用户量越来越大&#xff0c;…

编译 libpng zlib mozjpeg libjpeg-turbo 失败的解决方法

使用vcpkg 进行下载 在使用vcpkg安装这些库之前&#xff0c;请确保你已经正确安装并配置了vcpkg。以下是在Windows环境下&#xff0c;使用vcpkg安装libpng, zlib, mozjpeg, 和 libjpeg-turbo的命令序列。这些命令假设你已经在命令行中进入了vcpkg的根目录。 安装zlib: vcpkg i…

队列的特性及代码实现(C语言)

目录 队列的定义 队列的实现分析 代码实现 Queue.h Queue.c 队列的定义 队列是只允许在一端进行插入操作&#xff0c;而在另一段进行删除操作的线性表。 首先&#xff0c;让我们来看一看生活中的队列&#xff0c;当我们去银行办理业务的时候&#xff0c;我们进入银行的时候…

Python的第三方库OS库

读者大大们好呀&#xff01;&#xff01;!☀️☀️☀️ &#x1f525; 欢迎来到我的博客 &#x1f440;期待大大的关注哦❗️❗️❗️ &#x1f680;欢迎收看我的主页文章➡️寻至善的主页 文章目录 &#x1f525;前言&#x1f680;OS/SHUTIL 的方法描述&#x1f680;OS/SHUTIL…

Golang 协程和 Channel 的协同工作

在 Golang 中&#xff0c;协程&#xff08;goroutine&#xff09;和通道&#xff08;channel&#xff09;是并发编程的两大支柱。协程是一种轻量级的线程&#xff0c;而通道则是协程之间进行通信的管道。在本文中&#xff0c;我们将通过一个简单的示例来深入理解它们是如何协同…

GPT-4o:突破与革新

近年来&#xff0c;人工智能&#xff08;AI&#xff09;技术迅速发展&#xff0c;特别是在自然语言处理&#xff08;NLP&#xff09;领域&#xff0c;GPT系列模型表现尤为突出。随着OpenAI不断推出新版本&#xff0c;GPT-4o作为最新成员&#xff0c;再次引起广泛关注。本文将对…

不同linux账户切换不同的cuda版本

原因 由于服务器中安装了两个版本的cuda&#xff08;cuda10.1和cuda11.1&#xff09;&#xff0c;不同项目可能需要应用不同的cuda版本&#xff0c;但是自己又没有root权限或者只想在使用指定conda环境时改为用指定的cuda版本。总结起来有三种方法&#xff1a; 1、修改软链接指…

新游启航 失落的方舟台服注册指南 一文教会你方舟台服注册

新游启航&#xff01;失落的方舟台服注册指南&#xff01;一文教会你方舟台服注册 失落的方舟作为本月最受期待游戏之一&#xff0c;在上线之际许多玩家已经有点急不可待了。这款游戏是由开发商Smile gate开发的一款MMORPG类型游戏&#xff0c;这款游戏的基本玩法与其他MMORPG…

理解AdaBoost算法:简单流程概述(一)【流程理解、无数学推导】

什么是AdaBoost 算法&#xff1f; AdaBoost&#xff08;Adaptive Boosting&#xff09;算法&#xff0c;全称为 自适应提升 &#xff0c;是 一种在机器学习中用作集成方法的提升技术 。它之所以被称为自适应提升&#xff0c;因为每个实例的权重会重新分配&#xff0c;错误分类…

前端面试题日常练-day47 【面试题】

题目 希望这些选择题能够帮助您进行前端面试的准备&#xff0c;答案在文末 1. 在Bootstrap中&#xff0c;以下哪个类用于创建一个具有响应式的栅格系统&#xff1f; a) .grid-system b) .responsive-grid c) .container-fluid d) .grid-responsive 2. 哪个Bootstrap类用于创…

Python 关于编码与解码

在Python中&#xff0c;字符串的编码和解码是处理字符串与字节之间转换的重要操作。 常见的字符串编码方式包括以下几种&#xff1a; ASCII 编码&#xff08;American Standard Code for Information Interchange&#xff09;&#xff1a;ASCII 是最早的字符编码标准&#xf…