在 React 中，props（“properties”的缩写）是从一个组件传递数据到另一个组件的基本概念。它们允许你创建动态且可复用的组件。可以将 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!”。
在本步骤中，你将学习如何从父组件 (App) 向子组件 (Greeting) 传递数据。这在 JSX 中使用类似属性的语法来完成。
我们希望将一个人的名字传递给我们的 Greeting 组件，以便它能显示个性化的消息。
打开 src/App.jsx 文件。修改 <Greeting /> 行，包含一个值为 "John" 的 name prop。
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" 是它的值（value）。你可以通过将任何 JavaScript 表达式用花括号 {} 包裹起来来作为 prop 的值传递。对于字符串，使用引号就足够了。
保存文件后，开发服务器将自动重新加载。如果你查看 Web 8080 标签页，输出内容尚未改变。这是因为我们已经传递了 prop，但 Greeting 组件尚未开始使用它。我们将在下一步解决这个问题。
现在 Greeting 组件正在接收 name prop，让我们来使用它。子组件中的 props 对象包含了从父组件传递过来的所有属性。你可以使用点（dot）表示法来访问它们，例如 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.name、props.age 等可能会变得重复，尤其当一个组件接收许多 props 时。一种更简洁、更常见的方法是使用 ES6 解构（destructuring）直接在函数的参数列表中解包（unpack）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!”），但我们的代码现在更简洁、更易读了。
如果父组件没有传递必需的 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 标签页。你应该会看到两个问候语：
这是使你的组件更具可预测性并防止错误的健壮方法。
恭喜你完成了本次实验！你已经掌握了在 React 中使用 props 来创建可复用和动态组件的基础知识。
在本次实验中，你练习了：
props 对象访问 props。defaultProps 为 props 设置默认值，使你的组件更健壮。Props 是 React 开发的基石，掌握它们是构建复杂应用程序的关键一步。在继续你的 React 之旅时，请不断练习这些概念。
