React Props：向组件传递数据

简介

在 React 中，props（“properties”的缩写）是组件间传递数据的核心概念。它们让你能够创建动态且可复用的组件。你可以将 props 想象成传递给函数的参数；它们允许父组件对子组件进行配置。Props 是只读的，这意味着子组件永远不应该修改它接收到的 props。

在本实验中，你将学习如何：

定义并从父组件向子组件传递 props。
在子组件中访问和使用 props。
使用解构赋值让代码更简洁。
为 props 设置默认值。

让我们开始吧！

在函数式组件中定义 props 参数

在这一步中，你将创建一个新的子组件，并准备好让它接收 props。React 中的函数式组件可以接收一个参数，该参数是一个包含所有传入 props 的对象。按照惯例，这个对象被命名为 props。

首先，让我们进入项目目录。实验环境的初始化脚本已经创建了一个名为 my-app 的项目。

cd ~/project/my-app

接下来，我们需要安装项目依赖。

npm install

现在，让我们创建一个新的组件文件。在左侧的文件资源管理器中，导航到 src 文件夹。在 src 文件夹内创建一个新文件，命名为 Greeting.jsx。

将以下代码添加到你刚创建的 src/Greeting.jsx 文件中。这段代码定义了一个简单的函数式组件，它接收一个 props 参数。

function Greeting(props) {
  return <h2>Hello, World!</h2>;
}

export default Greeting;

接下来，我们需要在主 App 组件中导入并使用这个新组件。打开 src/App.jsx 文件并将其修改为如下内容：

import Greeting from "./Greeting.jsx";

function App() {
  return (
    <>
      <h1>Welcome to My App</h1>
      <Greeting />
    </>
  );
}

export default App;

现在，让我们启动开发服务器来查看我们的应用程序。

npm run dev -- --host 0.0.0.0 --port 8080

运行命令后，切换到界面左上角的 Web 8080 标签页。你应该能看到应用程序正在运行，显示“Welcome to My App”和“Hello, World!”。

从父组件传递 prop 值，例如 name="John"

在这一步中，你将学习如何从父组件 (App) 向子组件 (Greeting) 传递数据。这是通过 JSX 中类似属性的语法来实现的。

我们希望将一个人的名字传递给 Greeting 组件，以便它能显示个性化的消息。

打开 src/App.jsx 文件。修改 <Greeting /> 这一行，添加一个 name prop，其值为 "John"。

import Greeting from "./Greeting.jsx";

function App() {
  return (
    <>
      <h1>Welcome to My App</h1>
      <Greeting name="John" />
    </>
  );
}

export default App;

这里，name="John" 就是一个 prop。name 是 prop 的键（key），而 "John" 是它的值。你可以通过将任何 JavaScript 表达式包裹在花括号 {} 中来将其作为 prop 值传递。对于字符串，直接使用引号即可。

保存文件后，开发服务器会自动重新加载。如果你查看 Web 8080 标签页，输出内容暂时不会改变。这是因为我们虽然传递了 prop，但 Greeting 组件还没有使用它。我们将在下一步解决这个问题。

在子组件中使用 props.name 访问 prop

既然 Greeting 组件已经接收到了 name prop，让我们来使用它。子组件中的 props 对象包含了从父组件传递过来的所有属性。你可以使用点号表示法（dot notation）来访问它们，例如 props.propertyName。

打开 src/Greeting.jsx 文件。我们将修改它以访问 props.name 并显示个性化的问候语。使用花括号 {} 将 JavaScript 表达式直接嵌入到 JSX 中。

使用以下代码更新 src/Greeting.jsx：

function Greeting(props) {
  return <h2>Hello, {props.name}!</h2>;
}

export default Greeting;

保存文件。现在，切换到 Web 8080 标签页。你应该能看到消息已更新为“Hello, John!”。

这展示了 React 中数据流的基本方式：通过 props 从父组件流向子组件。

在函数参数中解构 props

编写 props.name、props.age 等代码可能会变得重复，特别是当组件接收许多 props 时。一种更简洁且更常用的方法是使用 ES6 解构赋值，直接在函数的参数列表中从 props 对象中提取属性。

让我们重构 Greeting 组件以使用解构赋值。

打开 src/Greeting.jsx 并修改函数签名。我们不再接收 props，而是直接解构它以获取 name。

将文件更新为如下内容：

function Greeting({ name }) {
  return <h2>Hello, {name}!</h2>;
}

export default Greeting;

通过将 (props) 改为 ({ name })，我们告诉 JavaScript 从传递给函数的对象中提取 name 属性。这使得组件主体更加简洁，因为我们现在可以直接使用 name，而无需使用 props.name。

保存文件并查看 Web 8080 标签页。输出结果应该完全相同（“Hello, John!”），但我们的代码现在更加简洁且易于阅读。

使用默认参数设置默认 props

如果父组件没有传递必需的 prop 会发生什么？该值将为 undefined，这可能导致错误或意外的 UI 表现。为了防止这种情况，你可以为 props 指定默认值。

对于函数式组件，你可以在函数签名中使用默认参数。

让我们为 Greeting 组件设置一个默认名字。打开 src/Greeting.jsx 并修改函数参数以包含默认值。我们将默认名字设置为 "Guest"。

function Greeting({ name = "Guest" }) {
  return <h2>Hello, {name}!</h2>;
}

export default Greeting;

现在，让我们测试一下。打开 src/App.jsx 并添加另一个 <Greeting /> 组件，但这次不要给它传递 name prop。

import Greeting from "./Greeting.jsx";

function App() {
  return (
    <>
      <h1>Welcome to My App</h1>
      <Greeting name="John" />
      <Greeting />
    </>
  );
}

export default App;

保存这两个文件。前往 Web 8080 标签页。你现在应该能看到两条问候语：

"Hello, John!"（来自接收了 prop 的组件）
"Hello, Guest!"（来自使用了默认 prop 的组件）

这是一种让组件更具可预测性并防止错误的稳健方法。

总结

恭喜你完成了本实验！你已经学习了在 React 中使用 props 创建可复用和动态组件的基础知识。

在本实验中，你练习了：

使用 props 从父组件向子组件传递数据。
使用 props 对象在子组件中访问 props。
使用解构赋值编写更简洁、更易读的代码。
使用默认参数为 props 设置默认值，使组件更加稳健。

Props 是 React 开发的基石，掌握它们是构建复杂应用程序的关键一步。在你继续 React 学习之旅的过程中，请持续练习这些概念。