了解 React 中的 Props：综合指南-js教程-PHP中文网

了解 React 中的 Props：综合指南

Susan Sarandon

发布： 2024-10-30 03:37:03

原创

604 人浏览过

Understanding Props in React: A Comprehensive Guide

在 React 世界中，props（属性的缩写）在构建动态和交互式用户界面中发挥着至关重要的作用。它们是数据从父组件传递到子组件的机制，支持单向数据流，从而简化状态管理。本博客将探讨什么是道具、如何有效地使用它们以及要遵循的最佳实践。

什么是道具？

Props 是保存组件属性值的对象。它们是只读的，这意味着接收它们的子组件不能修改它们。这种不变性有助于维持应用程序中的可预测行为。

道具的主要特征：

不可变：一旦传递给组件，道具就不能被该组件修改。
可重用：道具通过允许组件接受动态数据输入来实现组件的可重用性。
单向流：道具从父级传递到子级，维护单向数据流，从而简化应用程序的状态管理。

如何在 React 中使用 Props

为了了解 props 的工作原理，让我们考虑一个示例，其中我们有一个将数据传递给子组件的父组件。

第 1 步：定义子组件

创建一个名为ChildComponent.jsx的文件并写入以下代码：

import React from 'react';

const ChildComponent = (props) => {
    return (
        <div>
            <h1>{props.greeting}</h1>
            <p>{props.message}</p>
        </div>
    );
};

export default ChildComponent;

登录后复制

在此代码中，ChildComponent 期望接收两个 props：greeting 和 message。

第 2 步：从父组件传递 Props

现在创建一个名为 ParentComponent.jsx 的文件并包含以下代码：

import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
    return (
        <ChildComponent 
            greeting="Hello, World!" 
            message="Welcome to learning React props!" 
        />
    );
};

export default ParentComponent;

登录后复制

这里，ParentComponent 将两个 props 传递给 ChildComponent，然后由 ChildComponent 显示它们。

第三步：渲染父组件

最后，在根组件中渲染 ParentComponent，通常是 App.jsx：

import React from 'react';
import ParentComponent from './ParentComponent';

const App = () => {
    return (
        <div>
            <ParentComponent />
        </div>
    );
};

export default App;

登录后复制

要查看实际效果，请使用 npm run dev 运行开发服务器，然后导航到本地服务器 URL。

解构道具

Props 也可以直接在函数签名内或函数体内进行解构，以获得更清晰的代码：

const ChildComponent = ({ greeting, message }) => {
    return (
        <div>
            <h1>{greeting}</h1>
            <p>{message}</p>
        </div>
    );
};

登录后复制

这种方法允许您直接访问 prop 值，而无需使用 props。前缀。

默认道具

您可以为 props 定义默认值，以防父组件未提供它们。这可以防止错误或提供后备值：

ChildComponent.defaultProps = {
    greeting: "Default Greeting",
    message: "Default Message"
};

登录后复制

如果ParentComponent没有传递这些props，ChildComponent将使用指定的默认值。

React 中不同类型的 Props

字符串道具：用于传递文本或字符。
Number Props：用于整数或浮点数等数值。
Boolean Props：用于 true 或 false 值；对于切换状态很有用。
对象属性：用于传递复杂的数据结构，如 JavaScript 对象。
数组道具：非常适合传递列表或数据集合。
Function Props：用于传递可以在子组件内执行的函数。

道具类型检查

React 提供了一种使用 prop-types 验证传递给组件的 props 的方法。这可以确保组件接收到正确类型的数据并防止由于不正确的 prop 类型而导致的错误。

首先，安装 prop-types 包：

import React from 'react';

const ChildComponent = (props) => {
    return (
        <div>
            <h1>{props.greeting}</h1>
            <p>{props.message}</p>
        </div>
    );
};

export default ChildComponent;

登录后复制

然后，在您的组件中使用它：

import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
    return (
        <ChildComponent 
            greeting="Hello, World!" 
            message="Welcome to learning React props!" 
        />
    );
};

export default ParentComponent;

登录后复制

如果开发过程中缺少所需的道具，此验证将警告您。

支柱钻井

当您将 prop 传递到不需要它们的多层组件时，只是为了将它们传递到深度嵌套的组件，就会发生 Prop 钻探。这会使您的代码可读性较差且难以维护。

支柱钻井示例

假设您需要从顶级 App 组件向下传递多个层的 userName 属性：

import React from 'react';
import ParentComponent from './ParentComponent';

const App = () => {
    return (
        <div>
            <ParentComponent />
        </div>
    );
};

export default App;

登录后复制

为了避免 prop 钻取，请考虑使用 Context API 或 Redux 等状态管理库来管理全局或共享状态。