传递给组件

React 组件使用 props 相互通信。每个父组件都可以通过为其子组件提供道具来将一些信息传递给子组件。Props 可能会让您想起 HTML 属性,但您可以通过它们传递任何 JavaScript 值,包括对象、数组和函数。

Props 是传递给 JSX 标签的信息。例如,、、、、和是您可以传递给 :classNamesrcaltwidthheight<img>

function Avatar() {return (<imgclassName="avatar"src="https://i.imgur.com/1bX5QH6.jpg"alt="Lin Lanying"width={100}height={100}/>);
}export default function Profile() {return (<Avatar />);
}

可以传递给标签的 prop 是预定义的(ReactDOM 符合 HTML 标准)。但是你可以将任何道具传递给自己组件,比如 ,来自定义它们。就是这样!<img><Avatar>

将道具传递给组件

在此代码中,组件不会将任何 props 传递给其子组件:ProfileAvatar

export default function Profile() {return (<Avatar />);
}

你可以分两步给出一些道具。Avatar

第 1 步:将 props 传递给子组件

首先,将一些道具传递给 .例如,让我们传递两个道具:(一个对象)和(一个数字):Avatarpersonsize

export default function Profile() {return (<Avatarperson={{ name: 'Lin Lanying', imageId: '1bX5QH6' }}size={100}/>);
}

第 2 步:读取子组件内的 props

您可以通过列出它们的名称来阅读这些道具,这些道具在内部和后面用逗号分隔。这使您可以在代码中使用它们,就像使用变量一样。person, size({})function AvatarAvatar

function Avatar({ person, size }) {// person and size are available here
}

添加一些逻辑,使用 和 props 进行渲染,就完成了。Avatarpersonsize

现在,您可以配置为使用不同的道具以多种不同的方式进行渲染。尝试调整值!Avatar

import { getImageUrl } from './utils.js';function Avatar({ person, size }) {return (<imgclassName="avatar"src={getImageUrl(person)}alt={person.name}width={size}height={size}/>);
}export default function Profile() {return (<div><Avatarsize={100}person={{ name: 'Katsuko Saruhashi', imageId: 'YfeOqp2'}}/><Avatarsize={80}person={{name: 'Aklilu Lemma', imageId: 'OKS67lh'}}/><Avatarsize={50}person={{ name: 'Lin Lanying',imageId: '1bX5QH6'}}/></div>);
}
export function getImageUrl(person, size = 's') {return ('https://i.imgur.com/' +person.imageId +size +'.jpg');
}

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

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

相关文章

libcity笔记:详细流程(以DeepMove为例)

1 主调用 python run_model.py --task traj_loc_pred --model DeepMove --dataset gowalla --batch_size5有task、dataset、model三个必须命令行参数batch_size一个可选命令行参数没有confg_file 1.1 libcity/utils/argument_list.py/str2bool 将字符串表示的布尔值转换为 Pyt…

结合kimi chat的爬虫实战思路

背景 想钻研一下项目组件&#xff0c;找找之后的学习方向。不能自以为是&#xff0c;所以借着网开源项目网站上公布的项目内容看一下&#xff0c;那些是我可以努力去学习的&#xff08;入门的&#xff09;。首先需要获取相关内容&#xff0c;于是爬取整理。 任务1&#xff1a…

操作系统实战(二)(linux+C语言)

实验内容 通过Linux 系统中管道通信机制&#xff0c;加深对于进程通信概念的理解&#xff0c;观察和体验并发进程间的通信和协作的效果 &#xff0c;练习利用无名管道进行进程通信的编程和调试技术。 管道pipe是进程间通信最基本的一种机制,两个进程可以通过管道一个在管道一…

[Linux] git工具的安装和使用

目录 前言 安装 1.构建仓库 2.将仓库克隆到本地 使用 1.三板斧 1.git add 新增 2.git commit 提交 3.git push 推送 2.常用指令 前言 git 是一个代码托管平台&#xff0c;它的创始人是大名鼎鼎的 Linux 之父&#xff1a; 林纳斯托瓦兹&#xff0c;git的诞生可以使我们对…

pear + pecl 安装php扩展

pear https://pear.php.net/manual/en/installation.getting.php https://pear.php.net/go-pear.phar 让 CMD 支持 utf8 > chcp 65001 卸载 > php go-pear.phar uninstall 安装 > php go-pear.phar system 12 修改 12. Name of configuration file …

解释 RESTful API 以及如何使用它构建 web 应用程序

RESTful API&#xff08;Representational State Transfer&#xff09;是一种设计风格&#xff0c;用于创建网络应用程序的 API。它基于HTTP协议&#xff0c;通过使用标准的HTTP方法&#xff08;如GET、POST、PUT和DELETE&#xff09;来实现对资源的操作。 RESTful API的设计原…

python turtle

名字动画 #SquareSpiral1.py import turtle t turtle.Pen() turtle.bgcolor("black")my_nameturtle.textinput("输入你的姓名","你的名字&#xff1f;") colors["red","yellow","purple","blue"] for…

如何在Python中实现简单的OCR(光学字符识别)?

要在Python中实现简单的OCR&#xff08;光学字符识别&#xff09;&#xff0c;可以使用开源库Tesseract。Tesseract是一个免费的OCR引擎&#xff0c;支持多种语言和平台。 以下是使用Python和Tesseract进行简单OCR的步骤&#xff1a; 安装Tesseract和Python的tesseract包&…

金融业开源软件应用 管理指南

金融业开源软件应用 管理指南 1 范围 本文件提供了金融机构在应用开源软件时的全流程管理指南&#xff0c;对开源软件的使用和管理提供了配套 组织架构、配套管理规章制度、生命周期流程管理、风险管理、存量管理、工具化管理等方面的指导。 本文件适用于金融机构规范自身对开…

ModelID

* dev_display_shape_matching_results (ModelID, red, Row5, Column5, Angle, 1, 1, 0) *利用模板进行模板匹配&#xff0c;输出坐标角度匹配分数等参数 vector_angle_to_rigid (0, 0, 0, Row5, Column5, Angle, HomMat2D) *从模板匹配函数的结果…

环信设置头像昵称(安卓android)版

在此真的要吐槽吐槽环信&#xff0c;那么大的公司&#xff0c;文档那么乱。。。真的像一坨屎一样&#xff0c;翻个demo东翻西翻&#xff0c;官网论坛看的眼瞎。。。几乎要放弃了&#xff0c;还好百度到别人的看了看弄出来了 1、首先&#xff0c;要确认自己用的是哪个环信的UI库…

Redis 入坑基本指南

引言 本指南将帮助您了解如何安装、配置和基本使用 Redis。Redis 是一款开源的高性能键值存储系统&#xff0c;可用于缓存、数据库、消息中间件等多种用途。 1. 安装 Redis a. 下载 Redis&#xff1a; 可以从 Redis 官方网站&#xff08;https://redis.io&#xff09;下载最…

课程作业管理系统,基于 SpringBoot+Vue+MySQL 开发的前后端分离的课程作业管理系统设计实现

目录 一. 前言 二. 功能模块 2.1. 管理员功能模块 2.2. 教师功能模块 2.3. 学生功能模块 三. 部分代码实现 四. 源码下载 一. 前言 随着科学技术的飞速发展&#xff0c;社会的方方面面、各行各业都在努力与现代的先进技术接轨&#xff0c;通过科技手段来提高自身的优势…

shell脚本编写-测试同一网段内主机是否在线

除了可以使用ansible自动化运维工具判断主机是否在线以外&#xff0c;还可以通过编写Shell脚本来实现。 1、编写脚本 #! /bin/bash #测试192.168.81.0/24网段中哪些主机处于开机状态&#xff0c;哪些主机处于关机状态# #方法一&#xff1a;使用for循环判断 # for i in {1..25…

传统汽车空调系统工作原理

1.首先讲一个概念 液体变成气体&#xff1a;吸热 气体变成液体&#xff1a;放热 2.在汽车空调系统中热量的传递的介质不是水&#xff0c;而是氟利昂&#xff0c;简称&#xff1a;“氟”。 3.传统式汽车空调结构如下 该三个部件位于车头进气口位置 该部位位于汽车驾驶车厢前方…

【R语言从0到精通】-4-回归建模

通过之前的文章&#xff0c;我们已经基本掌握了R语言的基本使用方法&#xff0c;那从本次教程开始&#xff0c;我们开始聚焦如何使用R语言进行回归建模。 4.1 回归简介 回归分析是一种统计学方法&#xff0c;用于研究两个或多个变量之间的相互关系和依赖程度。它可以帮助我们了…

分布式任务调度工具 XXL-JOB

默认的账号密码是&#xff1a;admin/123456 一&#xff0c;部署docker容器 docker run \ -e PARAMS"--spring.datasource.urljdbc:mysql://192.168.150.101:3306/xxl_job?Unicodetrue&characterEncodingUTF-8 \ --spring.datasource.usernameroot \ --spring.dataso…

QT设计模式:外观模式

基本概念 外观模式&#xff08;Facade Pattern&#xff09;是一种结构型设计模式&#xff0c;它提供了一个统一的接口&#xff0c;用于访问子系统中的一群接口&#xff0c;从而简化了客户端与子系统之间的交互&#xff0c;这种方式隐藏了子系统的复杂性&#xff0c;使客户端更…

web server apache tomcat11-33-CDI

前言 整理这个官方翻译的系列&#xff0c;原因是网上大部分的 tomcat 版本比较旧&#xff0c;此版本为 v11 最新的版本。 开源项目 从零手写实现 tomcat minicat 别称【嗅虎】心有猛虎&#xff0c;轻嗅蔷薇。 系列文章 web server apache tomcat11-01-官方文档入门介绍 web…

使用pytorch构建GAN网络并实现FID评估

上一篇文章介绍了GAN的详细理论&#xff0c;只要掌握了GAN&#xff0c;对于后面各种GAN的变形都变得很简单&#xff0c;基础打好了&#xff0c;盖大楼自然就容易了。既然有了理论&#xff0c;实践也是必不可少的&#xff0c;这篇文章将使用mnist数据集来实现简单的GAN网络&…