是否让您感到困惑?你不是一个人。我将引导您了解有关 props 和 PropTypes 的所有内容。它们可以让您在开发 React 应用程序时变得更加轻松。本教程将向您介绍有关 props、传递和访问 props 以及使用 props 将信息传递给任何组件的详细信息。 构建 React 应用程序涉及将 UI 分解为多个组件,这意味着我们需要将数据从一个组件传递到另一个组件。Props 是 React 组件之间传递信息的重要机制,我们将详细研究它们。如果不研究 PropTypes,本文将是不完整的,因为它们确保组件使用正确的数据类型并传递正确的数据。 使用 验证我们作为 props 获得的数据始终是一个好习惯。您还将了解如何在 React 中集成 PropTypes、使用 进行类型检查以及使用 defaultProps。在本教程结束时,您将了解如何有效地使用 props 和 。
重要的是您已经具备
工作原理的基本知识。 了解道具 允许我们使用称为 props(属性的缩写)的东西将信息传递给组件。由于 React 由多个组件组成,props 使得在需要它们的组件之间共享相同的数据成为可能。它利用单向数据流(父到子组件)。但是,使用回调函数,可以将道具从子组件传递回父组件。 这些数据可以有不同的形式:数字、字符串、数组、函数、对象等。我们可以将 props 传递给任何组件,就像我们 阿塞拜疆电话号码列表 可以在任何 标签中声明属性一样。看看下面的代码: 复制 在此代码片段中,我们将名为 的 prop 传递posts给名为 的组件PostList。该道具的值为。让我们分解一下如何访问和传递数据。 参加关于前端、设计和用户体验的精彩研讨会,包括实用要点、现场会议、视频录制和友好的问答。与布拉德·弗罗斯特(Brad Frost)、史蒂夫·沃尔特(Stéph Walter)和其他许多人一起。
为了使本教程变得有趣
让我们创建一个显示用户姓名和帖子列表的应用程序。应用演示如下: 请参阅的笔传递和访问道具。 该应用程序包含组件集合: 一个App组件 、 一个组件 和 一个Post组件。 帖子列表将需要用户的content和 等数据。将每个发布的项目作为组件返回Post(我们稍后将对其进行建模)。另外,请注意上面代码片段中的使用。对于 React 新手来说,键是分配给列表中每个项目的唯一标识符,使我们能够区分项目。在这种情况下,关键是id每个帖子的。两个项目不可能具有相同的id,因此这是用于此目的的一个很好的数据。 同时,其余属性作为 传递给组件。 因此,让我们创建Post组件并使 AO 列表 用其中的复制 我们将组件构建为功能组件,而不是像我们为组件所做的那样将其定义为类组件。我这样做是为了向您展示如何访问功能组件中的 ,与我们如何使用. 因为这是一个功能组件,所以我们可以使用 访问这些值。 我们现在已经学习了如何传递和访问 ,以及如何将信息从一个组件传递到另一个组件。现在让我们考虑一下 如何与函数一起工作。 在一天之内准备好数据网格从未如此简单。