”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 道具基础知识:第 1 部分

道具基础知识:第 1 部分

发布于2024-11-08
浏览:319

这是一个关于如何使用道具的初学者友好教程。在阅读之前了解什么是解构以及如何使用/创建组件非常重要。

Props,properties的缩写,props允许我们从父组件向子组件发送信息,还需要注意的是它们可以是任何数据类型。

必须了解为任何组件创建 prop 的语法。在 React 中,您必须使用相同的语法来编写 html 标签的属性。我们指定 prop 的方式是将其放入我们的元素中,如下所示:


ParentPlant() {
  return  
}


创建 Prop 时要记住的一个好规则是:字符串不需要在其值周围使用大括号,我们只对其他数据类型这样做。正如你在上面看到的,我们可以通过将它们分配给父组件来拥有大量的 props。当我们的组件中包含 props 时,重要的是要知道我们在技术上将它们向下传递。一旦我们传递了 props,我们就需要能够在我们想要的组件中接收它们。在本例中是我们的 ChildPlant 组件。

接收道具:


function ChildPlant(props) {
  return (
    
      {props.text} {props.number}
    >
  )
}


我们在这里做的事情: 1. 我们在 ChildPlant 组件的参数中接收 prop,2. 我们通过 prop 的名称解构 prop 的值。重要的是要知道我们的 props 不是 参数,而是与参数类似的功能。

将父组件数据传递给子组件的唯一方法是通过 props。我喜欢把它想象成 DNA,父组件拥有其内部已经存在的自身的各个方面。因为孩子也可以拥有父母 DNA 的某些方面,所以道具的作用就像使孩子的头发变成红色、黑色或金色的激活器。

道具在子函数中接收并通过父函数发送,但道具只能向下发送而不能向上发送。我们也可以将道具视为对象。这是因为它们本质上保存类似于键:值对的数据。回顾一下为什么它们与参数相似,因为它们在其中存储多个对象。我喜欢将接收道具的区域视为占位符。它们占用了我们想要与组件共享的某些对象的空间,并在需要时通过解构和点符号进行交换。

这是一个可视化它的好方法:

Props Basics: Part 1

在这里,我们可以可视化保存方框内所有内容的道具,每个道具都保存第一个示例中各自的数据值。现在我们只需使用解构方法来获取 prop 的值。简而言之,这就是如何使用道具!

版本声明 本文转载于:https://dev.to/alegendcodes/props-basics-part-1-1mmk?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • 如何解决 Webpack 和 Babel 的“You May Need an Appropriate Loader”错误?
    如何解决 Webpack 和 Babel 的“You May Need an Appropriate Loader”错误?
    解决 Webpack 和 Babel 的“您可能需要合适的加载器”错误遇到此错误意味着 Webpack 需要合适的加载器来解释文件。在这个特定实例中,Babel 将用于 ES6 编译。要解决此问题,请按照以下步骤操作:安装 ES2015 预设:npm install babel-preset-es2...
    编程 发布于2024-11-08
  • 执行上下文和调用堆栈
    执行上下文和调用堆栈
    为顶级代码创建全局执行上下文,即不在任何 fn 内的代码。因此,首先执行 fn 之外的代码。 fn-decln/exprsn 的 fn 主体内的代码仅在调用时执行。 执行上下文(EC) JS执行的环境。 存储一些要执行的代码的所有必要信息,例如局部变量、传递给 fn 的 args。 ...
    编程 发布于2024-11-08
  • 是否有必要将字符串传递给 setTimeout?
    是否有必要将字符串传递给 setTimeout?
    向 setTimeout 传递字符串:一个必要性问题由于性能问题、潜在的安全风险及其不推荐使用,许多开发人员不赞成向 setTimeout 传递字符串的做法地位。然而,在极少数情况下,这种语法可能是有益的。弃用争论setTimeout 和 setInterval 的传统语法涉及传递一个表示要执行的代...
    编程 发布于2024-11-08
  • Hours是一个环境变量,我将使用ENV。冷静冷静,我先告诉你一件事
    Hours是一个环境变量,我将使用ENV。冷静冷静,我先告诉你一件事
    我们总是很匆忙,想要尽快开发,我们经常会采用旧习惯并构建旧软件,我们可以改进的一个项目是这个叫做环境的小东西,让我们进一步了解一下。 首先,我想在这里展示 Laravel 配置概念的重点,我不会担心其余的模式,例如资源或其他类似的模式。 1 - 让我们寻求知识! 不久前,我听说我无法在我的疯狂代...
    编程 发布于2024-11-08
  • 要记住的 useState:将变量存储在 React 的内存中!
    要记住的 useState:将变量存储在 React 的内存中!
    在 React 的世界中,管理组件的状态对于构建动态和交互式应用程序至关重要。最强大的工具之一是 useState 钩子。 在 React 世界中,状态管理是创建交互式和动态应用程序的基石之一。 useState 是 React 中最常用的钩子之一,是管理组件状态的有效方法。在本文中,我们将研究 u...
    编程 发布于2024-11-08
  • 实现订单处理系统:部分分布式跟踪和日志记录
    实现订单处理系统:部分分布式跟踪和日志记录
    1. Introduction and Goals Welcome to the fifth installment of our series on implementing a sophisticated order processing system! In our prev...
    编程 发布于2024-11-08
  • 如何在不同浏览器中准确测量调整大小后的图片的原始尺寸?
    如何在不同浏览器中准确测量调整大小后的图片的原始尺寸?
    跨浏览器揭示客户端调整大小图像的原始尺寸确定已在客户端调整大小的图像的真实尺寸side 是许多 Web 开发场景的关键任务。无论您是调整图像以实现响应式布局,还是向用户显示原始尺寸,找到一个跨浏览器一致工作的可靠解决方案至关重要。选项 1:释放 OffsetWidth 和 OffsetHeight一...
    编程 发布于2024-11-08
  • Python中什么时候会遇到“FileNotFoundError: No Such File or Directory”?
    Python中什么时候会遇到“FileNotFoundError: No Such File or Directory”?
    FileNotFoundError 疑难解答:没有这样的文件或目录尝试打开文件时,您可能会遇到“FileNotFoundError:[Errno 2]没有这样的文件或目录”错误,表明Python找不到指定的文件。由于当前工作目录与文件的实际位置之间存在差异,通常会出现此问题。了解相对路径默认情况下,...
    编程 发布于2024-11-08
  • 如何通过限制用户对其自己创建的内容的访问来保护 MySQL 数据库?
    如何通过限制用户对其自己创建的内容的访问来保护 MySQL 数据库?
    通过限制对用户创建的数据库的访问来保护 MySQL 数据库在多用户 MySQL 设置中,确保数据安全至关重要。一个常见的挑战是允许用户创建数据库,同时限制他们只能访问自己创建的数据库。为了解决此问题,MySQL 提供了一种使用通配符数据库名称的细致方法。解决方案不是授予特定数据库的权限,而是授予具有...
    编程 发布于2024-11-08
  • Alura 的免费 HTML 和 CSS 挑战:构建 Netflix 副本
    Alura 的免费 HTML 和 CSS 挑战:构建 Netflix 副本
    7 天 HTML 和 CSS 代码是 Alura 为您提供的免费在线练习前端精髓的机会。 在 7 天的时间里,您将面临复制 Netflix 电影和剧集页面布局的挑战,应用从“div”、“section”等基本概念、CSS 中的图像内联和测量到更高级技术的所有内容例如 Flexbox 和 Grid。 ...
    编程 发布于2024-11-08
  • 让您在 4 年内成为更快的 AI 工程师的工具
    让您在 4 年内成为更快的 AI 工程师的工具
    在当今科技和创新驱动的世界,对人工智能工程师的需求很高。根据 BlueTree 的统计数据,到 2030 年,人工智能行业预计将增长近 20 倍。这种飙升的需求伴随着对更多人工智能工程师的需求。 在本文中,我们将探讨可以让您在执行 AI 工程任务时脱颖而出的 6 种顶级工具,以及它们如何帮助您更快地...
    编程 发布于2024-11-08
  • 如何从 Golang 程序设置 ulimit -n 而不影响全局限制?
    如何从 Golang 程序设置 ulimit -n 而不影响全局限制?
    从 Golang 程序中设置 ulimit -nQ: 如何从 Golang 程序中设置 ulimit -n 以将其限制在A:要从 Golang 程序中设置 ulimit -n,可以使用以下步骤:package main import ( "fmt" "s...
    编程 发布于2024-11-08
  • 当存在多个网卡时,如何限制 Go 的 HTTP 客户端的 IP 地址?
    当存在多个网卡时,如何限制 Go 的 HTTP 客户端的 IP 地址?
    如何限制 HTTP 客户端的 IP 地址Go 的 http.Client 可以实现高效的 HTTP 请求,但是如果你的系统包含多个 NIC?自定义 IP 绑定要将 http.Client 绑定到特定 IP,请使用 net.Transport 实例修改其 Transport 字段。这允许您指定net....
    编程 发布于2024-11-08
  • 再见`JSON.stringify()`和`{...obj}`,你好`structedClone()`!
    再见`JSON.stringify()`和`{...obj}`,你好`structedClone()`!
    什么是 StructuredClone()? StructuredClone() 是 2022 年引入的全局函数,可实现 JavaScript 对象的深度克隆。与 JSON.stringify() 和 JSON.parse() 等传统方法难以应对复杂的结构和循环引用不同,structuredClo...
    编程 发布于2024-11-08
  • 如何从 PHP 向另一个 PHP 页面发出 POST 请求?
    如何从 PHP 向另一个 PHP 页面发出 POST 请求?
    从 PHP 向另一个 PHP 页面发出 POST 请求在 PHP 脚本中,可能存在需要将数据发送到另一个 PHP 页面的情况。这可以通过 POST 请求来实现。实现方法如下:cURL 方法发出 POST 请求的一种方法是使用 cURL。无论作为扩展还是外部进程,cURL 都提供了一种便捷的方式来处理...
    编程 发布于2024-11-08

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3