首页/新闻资讯/正文详情

React 组件与 Props

发布时间:2026/9/25 21:18:50 来源:云帆数科 栏目:资讯中心
React 组件与 Props
React 组件与 Props前置React第一个 Vite 应用目标会拆组件会用 TypeScript 给 props 定类型。引言页面一大就该拆。组件是复用单位props是父传给子的只读数据。动手完整代码react2/02-components-props/democdreact2/02-components-props/demonpminstallnpmrun dev关键代码UserCard.tsxtype UserCardProps { name: string role: string years: number } export function UserCard({ name, role, years }: UserCardProps) { return ( article classNamecard h2{name}/h2 p classNamerole{role}/p p classNameyears从业 {years} 年/p /article ) }父组件传入不同 props得到三张卡片UserCard name小明 role前端 years{2} / UserCard name小红 role全栈 years{5} /运行截图记住props向下流动子组件不要偷偷改 props。需要变的数据放在拥有它的那一层的 state下一篇。TypeScript 的 props 类型能在编译期拦住拼写错误。下一篇State 与事件

相关推荐

AI 写掉 90% 代码后,最贵的变成「配 TaoToken 的人」
AI 写掉 90% 代码后,最贵的变成「配 TaoToken 的人」

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/25 21:18:37

用Vibeware把MCP接入MiXCopilot:给AI配一个专属记忆模块
用Vibeware把MCP接入MiXCopilot:给AI配一个专属记忆模块

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/25 21:18:30

Atlas 300V 24G实战:昇腾NPU上部署YOLO目标检测全流程指南
Atlas 300V 24G实战:昇腾NPU上部署YOLO目标检测全流程指南

“Atlas”这名字在深度学习部署圈子里,其实是个挺容易让人犯迷糊的词。有朋友以为是数据库,有朋友以为是漫画里的机器人,还有人第一反应是那个健身器材地垫。但只要你最近在搞目标检测、想在边缘设备或者服务器上跑 YOLO 推理,又恰… · 2026/9/25 21:18:30

万亿市值俱乐部迎来第四位芯片玩家,牢不可破的软件垄断松动了
万亿市值俱乐部迎来第四位芯片玩家,牢不可破的软件垄断松动了

万亿市值俱乐部迎来第四位芯片玩家,牢不可破的软件垄断松动了 很多人以为,人工智能这场军备竞赛,比的是谁能造出算力更猛的单张显卡,或者谁能把开发者牢牢锁在自己的软件地盘里。但在2026年9月,芯片江湖发生了一件让很… · 2026/9/25 21:50:47

档案管理信息系统核心设计:库表、权限与检索的工程落地
档案管理信息系统核心设计:库表、权限与检索的工程落地

简介:基于Delphi与SQL构建的档案管理信息系统是一份完整项目源码包,面向MIS系统开发者、数据库编程初学者及有档案管理需求的信息化人员。系统以档案数字化管理为目标,涵盖用户界面、业务逻辑、数据访问和数据库设计等层面,内建档… · 2026/9/25 21:50:47

Atlas 300V 24G部署YOLOv8实战:从模型转换到推理调优全攻略
Atlas 300V 24G部署YOLOv8实战:从模型转换到推理调优全攻略

1. Atlas到底指什么?先分清产品线再谈部署后台经常收到一类私信,开头都是同一个模板:“博主,atlas部署yolo怎么搞?我买了atlas 300v 24g,是不是运算加速卡?能不能直接训练?”每次看到… · 2026/9/25 21:50:47

AI数据分析Agent选哪家?2026年主流产品评测推荐
AI数据分析Agent选哪家?2026年主流产品评测推荐

2026年,AI数据分析Agent没有通吃答案。“哪家好”必须先绑定企业规模、行业场景和部署要求。如果你的核心诉求是私有化部署、多业务线统一指标口径,可以优先把ThinkingAI、华为云盘古、阿里云百炼放进POC名单;如果只需要轻量验证,… · 2026/9/25 21:50:47

AI 加持论文降重改写,几款常用降AI率平台怎么选才最稳妥
AI 加持论文降重改写,几款常用降AI率平台怎么选才最稳妥

摘要:本文围绕论文写作中的改写与降重需求,比较了几款常见的AI辅助工具,从改写能力、语言润色、引用规范等维度做横向梳理,并给出按写作阶段和语种匹配的选型思路。结论是先看清自己卡在改写还是润色,再决定用哪一类工… · 2026/9/25 21:50:47

儿童舞台妆怎么选?Bloom Bella主题安全方案解析
儿童舞台妆怎么选?Bloom Bella主题安全方案解析

儿童舞台妆不是成人舞台妆的缩小版,而是专为儿童肌肤敏感性(角质层厚度仅为成人1/3)、户外自然光显色稳定性(城市日光光谱下浅色易发灰)及高频清洗需求(清水即净、无泪液刺激)重构的技术赛道。真… · 2026/9/25 21:50:41

数值优化(Numerical Optimization)学习系列-03-共轭梯度方法(Conjugate Gradient)
数值优化(Numerical Optimization)学习系列-03-共轭梯度方法(Conjugate Gradient)

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/25 1:00:31

创维E900V22D刷机全攻略:S905L3SB芯片兼容性解析与救砖实战
创维E900V22D刷机全攻略:S905L3SB芯片兼容性解析与救砖实战

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/25 1:00:31

MQTT协议原理与Broker服务器搭建实战:从Mosquitto到EMQX
MQTT协议原理与Broker服务器搭建实战:从Mosquitto到EMQX

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/25 1:00:37

了解更多?预约专属演示

我们的顾问将为您一对一讲解产品与方案

企业微信二维码