『React』组件通信全攻略-EW帮帮网

点赞 + 关注 + 收藏 = 学会了

在 React 中，组件间通信是开发中最常见的场景之一。尤其是父组件和子组件之间，如何传值、如何响应事件，是理解组件化开发的第一步。

本文从零讲起，逐个讲解 React 中的通信方式，包括：

props 传递基本数据类型：这是最基本的通信方式，父组件通过 props 向子组件传递数据
props 传递 JSX 元素：父组件可以将 JSX 元素作为 props 传递给子组件
props 类型验证：确保接收到的 props 数据类型正确无误
利用 children 属性通信：通过 children 属性实现子组件向父组件传递数据
props 透传 (Prop Drilling)：在多层嵌套组件中传递 props
classname 属性传递与合并：处理组件样式类名的传递与合并问题

props 可以接收哪些类型的值

props 是 React 中父组件向子组件传递数据的主要方式，它可以接收多种类型的值，包括基本数据类型、对象、数组、函数等。了解 props 可以接收的值类型，有助于我们在开发中灵活运用 props 进行组件间的通信。

基本数据类型传递

props 可以接收各种基本数据类型，包括字符串、数字、布尔值等。这些基本类型的数据可以直接通过 props 传递给子组件。

在这里插入图片描述

父组件代码

// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const name = "雷猴"
  
  return (
    <div>
      <ChildComponent 
        name={name}
      />
    </div>
  );
}

export default ParentComponent;

子组件代码

// 子组件
import React from 'react';

function ChildComponent(props) {
  return (
    <div>
      <p>姓名: {props.name}</p>
    </div>
  );
}

export default ChildComponent;

在这个例子中，父组件通过 props 向子组件传递了字符串、数字和布尔值三种基本数据类型。子组件通过props对象访问这些值，并在界面上显示出来。

对象和数组类型传递

除了基本数据类型，props 还可以接收对象和数组等复杂数据类型。这种方式在传递结构化数据时非常有用。

在这里插入图片描述

父组件代码

// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const user = {
    name: "John Doe",
    age: 30,
    address: {
      street: "123 Main St",
      city: "Anytown",
      state: "CA"
    }
  };
  
  const hobbies = ["reading", "gaming", "coding"];
  
  return (
    <div>
      <ChildComponent 
        user={user}
        hobbies={hobbies}
      />
    </div>
  );
}

export default ParentComponent;

子组件代码

// 子组件
import React from 'react';

function ChildComponent(props) {
  return (
    <div>
      <h2>User Information</h2>
      <p>Name: {props.user.name}</p>
      <p>Age: {props.user.age}</p>
      <p>Address: {props.user.address.street}, {props.user.address.city}, {props.user.address.state}</p>
      
      <h2>Hobbies</h2>
      <ul>
        {props.hobbies.map((hobby, index) => (
          <li key={index}>{hobby}</li>
        ))}
      </ul>
    </div>
  );
}

export default ChildComponent;

在这个例子中，父组件向子组件传递了一个包含用户信息的对象和一个爱好数组。子组件可以直接访问这些对象的属性和数组的元素，并进行展示。

函数类型传递

props 还可以接收函数类型的值，这使得父组件可以向子组件传递回调函数，实现子组件向父组件传递数据的功能。这是一种非常重要的通信方式，我们将在后续章节详细讨论。

在这里插入图片描述

父组件代码

// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const handleChildData = (data) => {
    console.log("Received data from child:", data);
  };
  
  return (
    <div>
      <ChildComponent onDataReceived={handleChildData} />
    </div>
  );
}

export default ParentComponent;

子组件代码

// 子组件
import React from 'react';

function ChildComponent(props) {
  const sendDataToParent = () => {
    const data = "Hello from child!";
    props.onDataReceived(data);
  };
  
  return (
    <button onClick={sendDataToParent}>
      Send Data to Parent
    </button>
  );
}

export default ChildComponent;

在这个例子中，父组件向子组件传递了一个名为onDataReceived的回调函数。当子组件中的按钮被点击时，它会调用这个回调函数，并传递一个字符串数据。父组件接收到数据后，可以在控制台中打印出来。

JSX 元素传递

props 还可以接收 JSX 元素，这使得父组件可以向子组件传递 UI 元素，实现更灵活的组件组合。

在这里插入图片描述

父组件代码

// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const customTitle = function () {
    return <h1>Custom Title from Parent</h1>;
  };
  const customButton = <button>Custom Button from Parent</button>;
  
  return (
    <div>
      <ChildComponent 
        title={customTitle}
        button={customButton}
      />
    </div>
  );
}

export default ParentComponent;

子组件代码

// 子组件
import React from 'react';

function ChildComponent(props) {
  return (
    <div>
      {<props.title />}
      <div>{props.button}</div>
    </div>
  );

}

export default ChildComponent;

在这个例子中，我用了2种 JSX 传值和接收值的方法。父组件创建了一个标题和一个按钮的 JSX 元素，并通过 props 传递给子组件。子组件接收到这些 JSX 元素后，可以将它们渲染到页面上。

深入研究一下给 props 传递 JSX

在 React 中，父组件不仅可以向子组件传递数据，还可以传递 JSX 元素，这为组件的组合和复用提供了更大的灵活性。通过将 JSX 元素作为 props 传递，父组件可以控制子组件的部分 UI 呈现，实现更灵活的组件组合方式。

传递单个 JSX 元素

父组件可以将单个 JSX 元素作为 props 传递给子组件，子组件可以将其渲染到指定位置。

在这里插入图片描述

父组件代码

// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const customHeader = <h2>Custom Header from Parent</h2>;
  
  return (
    <div>
      <ChildComponent header={customHeader} />
    </div>
  );
}

export default ParentComponent;

子组件代码

// 子组件
import React from 'react';

function ChildComponent(props) {
  return (
    <div>
      {props.header}
      <p>This is content from the child component.</p>
    </div>
  );
}

export default ChildComponent;

在这个例子中，父组件创建了一个 <h2> 元素作为自定义标题，并通过header prop 传递给子组件。子组件在渲染时，将这个标题元素放在了段落之前，实现了父组件对子组件 UI 的部分控制。

传递多个 JSX 元素

父组件还可以向子组件传递多个 JSX 元素，子组件可以将它们按顺序渲染出来。

在这里插入图片描述

父组件代码

// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const content1 = <p>First content from parent.</p>;
  const content2 = <p>Second content from parent.</p>;
  const content3 = <p>Third content from parent.</p>;
  
  return (
    <div>
      <ChildComponent 
        content1={content1}
        content2={content2}
        content3={content3}
      />
    </div>
  );
}

export default ParentComponent;

子组件代码

// 子组件
import React from 'react';

function ChildComponent(props) {
  return (
    <div>
      {props.content1}
      {props.content2}
      {props.content3}
      <p>This is content from the child component.</p>
    </div>
  );
}

export default ChildComponent;

在这个例子中，父组件向子组件传递了三个段落元素，子组件将它们依次渲染在自己的内容之前。这种方式可以让父组件更精细地控制子组件的内容布局。

使用 children 属性传递 JSX

除了通过自定义 props 传递 JSX 元素，React 还提供了一个特殊的children属性，用于传递子组件。父组件可以在子组件标签之间放置 JSX 内容，这些内容会被自动传递给子组件的children属性。

在这里插入图片描述

父组件代码

// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  return (
    <div>
      <ChildComponent>
        <h2>Custom Header Using Children</h2>
        <p>This is content passed through children prop.</p>
      </ChildComponent>
    </div>
  );
}

export default ParentComponent;

子组件代码

// 子组件
import React from 'react';

function ChildComponent(props) {
  return (
    <div>
      {props.children}
      <p>This is content from the child component.</p>
    </div>
  );
}

export default ChildComponent;

在这个例子中，父组件在标签之间放置了一个标题和一个段落元素。子组件通过props.children访问这些内容，并将它们渲染在自己的内容之前。children属性是 React 中的一个特殊属性，专门用于处理组件标签之间的内容。

动态渲染传递的 JSX 元素

有时候，父组件传递给子组件的 JSX 元素可能需要根据某些条件进行动态渲染。子组件可以根据 props 的值来决定是否渲染传递的 JSX 元素。

在这里插入图片描述

父组件代码

// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const showHeader = true;
  const customHeader = <h2>Dynamic Header</h2>;
  
  return (
    <div>
      <ChildComponent 
        showHeader={showHeader}
        header={customHeader}
      />
    </div>
  );
}

export default ParentComponent;

子组件代码

// 子组件
import React from 'react';

function ChildComponent(props) {
  return (
    <div>
      {props.showHeader && props.header}
      <p>This is content from the child component.</p>
    </div>
  );
}

export default ChildComponent;

在这个例子中，父组件传递了一个showHeader布尔值和一个标题元素。子组件根据showHeader的值来决定是否渲染标题元素。如果showHeader为 true，就显示标题；否则，就不显示。

向子组件传递组件类型

父组件还可以向子组件传递组件类型，子组件可以根据接收到的组件类型动态创建实例。

父组件代码

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

function ParentComponent() {
  const buttonType = CustomButton;
  const inputType = CustomInput;
  
  return (
    <div>
      <ChildComponent 
        buttonType={buttonType}
        inputType={inputType}
      />
    </div>
  );
}

export default ParentComponent;

子组件代码

import React from 'react';

function ChildComponent(props) {
  return (
    <div>
      <props.buttonType label="Button from Child" />
      <props.inputType placeholder="Input from Child" />
    </div>
  );
}

export default ChildComponent;

在这个例子中，父组件向子组件传递了CustomButton和CustomInput两个组件类型。子组件使用这些组件类型动态创建了按钮和输入框实例，并传递了相应的 props。这种方式使得子组件可以更灵活地根据父组件的配置来渲染不同的 UI 元素。

验证 props 类型

在 React 开发中，props 验证是确保组件接收到正确数据类型的重要手段。通过对 props 进行类型验证，我们可以在开发过程中尽早发现数据类型不匹配的问题，提高代码的健壮性和可维护性。React V18 仍然支持使用prop-types库进行 props 类型验证，尽管官方推荐使用 TypeScript 进行静态类型检查，但对于 JavaScript 项目，prop-types仍然是一个很好的选择。

安装 prop-types 库

在使用 props 类型验证之前，我们需要先安装prop-types库。可以通过 npm 或 yarn 进行安装

npm install prop-types
# 或者
yarn add prop-types

安装完成后，我们就可以在组件中导入并使用PropTypes对象进行 props 类型验证了。

基本类型验证

prop-types提供了多种验证器，可以验证基本数据类型、对象、数组等。下面是一个基本类型验证的示例：

import React from 'react';
import PropTypes from 'prop-types';

function UserProfile(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>Age: {props.age}</p>
      <p>Email: {props.email}</p>
    </div>
  );
}

UserProfile.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number,
  email: PropTypes.string.isRequired,
};

export default UserProfile;

在这个例子中，我们定义了UserProfile组件，并为其 props 添加了类型验证：

name必须是字符串类型，并且是必填项
age可以是数字类型，也可以是可选的
email必须是字符串类型，并且是必填项

如果父组件在使用UserProfile时没有传递name或email，或者传递的类型不正确，React 将会在开发环境中显示警告信息。

复杂类型验证

prop-types还支持验证对象、数组等复杂类型，以及对象的形状（shape）。

import React from 'react';
import PropTypes from 'prop-types';

function Product(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>Price: ${props.price}</p>
      <p>Category: {props.category.name}</p>
      <p>Tags: {props.tags.join(', ')}</p>
    </div>
  );
}

Product.propTypes = {
  name: PropTypes.string.isRequired,
  price: PropTypes.number.isRequired,
  category: PropTypes.shape({
    id: PropTypes.number.isRequired,
    name: PropTypes.string.isRequired,
  }).isRequired,
  tags: PropTypes.arrayOf(PropTypes.string),
};

export default Product;

在这个例子中，我们定义了更复杂的类型验证：

category必须是一个对象，包含id（数字类型，必填）和name（字符串类型，必填）属性
tags必须是一个数组，数组中的每个元素都必须是字符串类型

这种方式可以确保组件接收到的复杂数据结构符合预期的格式。

函数类型验证

在 React 中，函数类型的 props 通常用于传递回调函数，我们也可以对这些函数进行类型验证。

import React from 'react';
import PropTypes from 'prop-types';

function Button(props) {
  return (
    <button onClick={props.onClick}>
      {props.label}
    </button>
  );
}

Button.propTypes = {
  label: PropTypes.string.isRequired,
  onClick: PropTypes.func.isRequired,
};

export default Button;

在这个例子中，onClick属性必须是一个函数，并且是必填项。这确保了父组件必须为按钮提供一个有效的点击处理函数。

自定义验证函数

除了使用预定义的验证器，我们还可以创建自定义的验证函数，实现更复杂的验证逻辑。

import React from 'react';
import PropTypes from 'prop-types';

function CustomInput(props) {
  return (
    <input 
      type={props.type} 
      value={props.value} 
      onChange={props.onChange} 
    />
  );
}

function validateEmailFormat(props, propName, componentName) {
  const value = props[propName];
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  
  if (value && !emailRegex.test(value)) {
    return new Error(
      `Invalid prop \`${propName}\` supplied to ` +
      `${componentName}. Expected a valid email address.`
    );
  }
}

CustomInput.propTypes = {
  type: PropTypes.string,
  value: PropTypes.string,
  onChange: PropTypes.func,
  email: validateEmailFormat,
};

export default CustomInput;

在这个例子中，我们定义了一个validateEmailFormat函数，用于验证email属性是否符合电子邮件格式。如果验证失败，函数会返回一个错误对象，React 会在开发环境中显示相应的警告信息。

可选 props 和默认值

在prop-types中，我们可以通过isRequired方法标记必填的 props。对于可选的 props，我们可以为它们指定默认值，当父组件没有传递这些 props 时，组件会使用默认值。

import React from 'react';
import PropTypes from 'prop-types';

function Greeting(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>{props.message}</p>
    </div>
  );
}

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
  message: PropTypes.string,
};

Greeting.defaultProps = {
  message: "Welcome to our site!",
};

export default Greeting;

在这个例子中，name是必填的字符串类型，而message是可选的，如果父组件没有传递message，则会使用默认值 “Welcome to our site!”。

使用 TypeScript 进行类型检查

虽然prop-types在 JavaScript 项目中很有用，但 React 官方推荐使用 TypeScript 进行静态类型检查。TypeScript 提供了更强大的类型系统和更全面的类型检查，可以在编译阶段发现类型错误，而不是在运行时。

import React from 'react';

interface UserProfileProps {
  name: string;
  age?: number;
  email: string;
}

function UserProfile({ name, age, email }: UserProfileProps) {
  return (
    <div>
      <h2>{name}</h2>
      <p>Age: {age}</p>
      <p>Email: {email}</p>
    </div>
  );
}

export default UserProfile;

在这个 TypeScript 示例中，我们使用接口UserProfileProps定义了组件的 props 类型。age属性后面的?表示该属性是可选的。TypeScript 会在编译时检查父组件传递的 props 是否符合这个接口定义的类型。

利用 children 让子组件给父组件传值

在 React 中，数据通常是单向流动的，即从父组件流向子组件。但有时候我们也需要实现反向通信，即子组件向父组件传递数据。虽然常规的做法是通过 props 传递回调函数，但有一种特殊的方法可以利用children属性来实现子组件向父组件传递数据。这种方法在某些场景下可以提供更灵活的组件组合方式。

常规回调函数方法回顾

在探讨利用children属性传递数据之前，我们先回顾一下常规的回调函数方法，以便更好地理解两者的区别。

父组件代码

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

function ParentComponent() {
  const handleChildData = (data) => {
    console.log('Received data from child:', data);
  };
  
  return (
    <div>
      <ChildComponent onDataReceived={handleChildData} />
    </div>
  );
}

export default ParentComponent;

子组件代码

import React from 'react';

function ChildComponent(props) {
  const sendData = () => {
    const data = 'Hello from child!';
    props.onDataReceived(data);
  };
  
  return (
    <button onClick={sendData}>
      Send Data via Callback
    </button>
  );
}

export default ChildComponent;

在常规方法中，父组件通过 props 向子组件传递一个回调函数（onDataReceived）。当子组件需要向父组件传递数据时，它调用这个回调函数，并将数据作为参数传递进去。父组件接收到数据后，可以进行相应的处理。

利用 children 属性传递回调函数

利用children属性实现反向通信的方法与常规方法有所不同。在这种方法中，父组件将回调函数作为children属性的值传递给子组件，而不是作为常规的 props。

父组件代码

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

function ParentComponent() {
  const handleChildData = (data) => {
    console.log('Received data from child:', data);
  };
  
  return (
    <div>
      <ChildComponent>
        {handleChildData}
      </ChildComponent>
    </div>
  );
}

export default ParentComponent;

子组件代码

import React from 'react';

function ChildComponent({ children }) {
  const sendData = () => {
    const data = 'Hello from child!';
    children(data);
  };
  
  return (
    <button onClick={sendData}>
      Send Data via Children
    </button>
  );
}

export default ChildComponent;

在这个例子中，父组件将handleChildData函数作为子组件的children传递进去。子组件通过children属性获取到这个函数，并在按钮点击时调用它，传递数据。父组件的handleChildData函数接收到数据后，在控制台中打印出来。

children 作为函数的使用模式

更常见的模式是将children作为一个函数来使用，这种模式通常被称为 “render props” 模式。父组件传递一个函数作为children，子组件在需要时调用这个函数，并传递数据。

父组件代码

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

function ParentComponent() {
  return (
    <div>
      <ChildComponent>
        {(data) => <p>Received: {data}</p>}
      </ChildComponent>
    </div>
  );
}

export default ParentComponent;

子组件代码

import React from 'react';

function ChildComponent({ children }) {
  const sendData = () => {
    const data = 'Hello from child!';
    children(data);
  };
  
  return (
    <div>
      <button onClick={sendData}>
        Send Data
      </button>
    </div>
  );
}

export default ChildComponent;

在这个例子中，父组件将一个函数作为children传递给子组件。这个函数接收一个参数data，并返回一个包含该数据的段落元素。子组件在按钮点击时调用children函数，并传递数据。父组件传递的函数接收到数据后，将其渲染为页面上的段落。

传递多个参数

子组件可以向父组件传递多个参数，父组件的回调函数可以接收这些参数并进行处理。

父组件代码

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

function ParentComponent() {
  return (
    <div>
      <ChildComponent>
        {(name, age) => (
          <div>
            <p>Name: {name}</p>
            <p>Age: {age}</p>
          </div>
        )}
      </ChildComponent>
    </div>
  );
}

export default ParentComponent;

子组件代码

import React from 'react';

function ChildComponent({ children }) {
  const sendData = () => {
    const name = 'John';
    const age = 30;
    children(name, age);
  };
  
  return (
    <button onClick={sendData}>
      Send Multiple Parameters
    </button>
  );
}

export default ChildComponent;

在这个例子中，子组件向父组件传递了两个参数：name和age。父组件的children函数接收这两个参数，并将它们渲染为两个段落元素。

使用对象传递复杂数据

当需要传递复杂数据时，可以将数据封装在一个对象中传递给父组件。

父组件代码

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

function ParentComponent() {
  return (
    <div>
      <ChildComponent>
        {(user) => (
          <div>
            <h2>{user.name}</h2>
            <p>Age: {user.age}</p>
            <p>Email: {user.email}</p>
          </div>
        )}
      </ChildComponent>
    </div>
  );
}

export default ParentComponent;

子组件代码

import React from 'react';

function ChildComponent({ children }) {
  const sendData = () => {
    const user = {
      name: 'John Doe',
      age: 30,
      email: 'john@example.com'
    };
    children(user);
  };
  
  return (
    <button onClick={sendData}>
      Send User Data
    </button>
  );
}

export default ChildComponent;

在这个例子中，子组件将一个用户对象作为参数传递给父组件。父组件的children函数接收这个对象，并将其各个属性渲染到页面上。

children 作为函数的优缺点

利用children属性传递回调函数的方法有以下优缺点：

优点：

更灵活的渲染逻辑：父组件可以完全控制如何渲染子组件传递的数据
更少的 props 污染：不需要在 props 中定义额外的回调函数名称
更直观的组件组合：父组件的渲染逻辑可以更自然地与子组件的功能结合

缺点：

调试难度增加：数据传递的路径可能不如常规方法直观
可读性挑战：对于不熟悉这种模式的开发者，代码可能较难理解
不支持多个回调函数：如果需要传递多个不同的回调函数，这种方法可能不够灵活

与常规回调方法的比较

下面是一个表格，比较了利用children属性传递数据和常规回调方法的异同：

特性	children 作为函数	常规回调方法
数据传递方向	子组件→父组件	子组件→父组件
实现方式	父组件传递函数作为 children，子组件调用该函数	父组件传递函数作为 children，子组件调用该函数
父组件接收数据方式	函数参数	回调函数参数
组件 API 设计	子组件需要处理 children 函数	子组件需要处理特定的回调 prop
灵活性	更高，可以灵活控制渲染逻辑	较低，需要在 props 中定义回调函数
可读性	对于熟悉该模式的开发者较高，否则较低	较高，符合常规 React 模式

中间组件透传（props 透传）

在 React 应用中，当组件结构变得复杂时，经常会遇到需要将 props 从顶层父组件传递到深层嵌套子组件的情况。这种情况下，如果中间组件不需要使用这些 props，但仍需要将它们传递下去，就会产生 props 透传（Prop Drilling）的问题。虽然 props 透传在 React 中是完全合法的，但它可能导致代码冗余和维护困难。本节将详细介绍 props 透传的概念、使用场景以及替代方案。

props 透传的基本概念

props 透传指的是父组件将 props 传递给子组件，而子组件本身并不使用这些 props，只是将它们继续传递给更深层的子组件。这种情况通常发生在多层嵌套的组件结构中。

组件结构：

ParentComponent
  ↳ MiddleComponent
    ↳ DeepChildComponent

在这个结构中，如果ParentComponent需要向DeepChildComponent传递数据，而MiddleComponent本身不需要使用这些数据，就需要通过 props 透传将数据从ParentComponent传递到DeepChildComponent。

props 透传的实现方式

在 React 中，props 透传可以通过两种方式实现：显式传递和使用展开运算符。

显式传递方式示例：

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

function ParentComponent() {
  const data = "Hello from parent!";
  
  return (
    <div>
      <MiddleComponent data={data} />
    </div>
  );
}

export default ParentComponent;

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

function MiddleComponent(props) {
  return (
    <div>
      <DeepChildComponent data={props.data} />
    </div>
  );
}

export default MiddleComponent;

import React from 'react';

function DeepChildComponent(props) {
  return (
    <div>
      <p>{props.data}</p>
    </div>
  );
}

export default DeepChildComponent;

在这个例子中，ParentComponent通过data prop 将数据传递给MiddleComponent，而MiddleComponent又将data prop 传递给DeepChildComponent。虽然MiddleComponent本身不使用data prop，但它必须将其传递下去。

使用展开运算符的方式示例：

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

function ParentComponent() {
  const data = "Hello from parent!";
  const config = {
    color: "red",
    size: "large"
  };
  
  return (
    <div>
      <MiddleComponent data={data} {...config} />
    </div>
  );
}

export default ParentComponent;

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

function MiddleComponent(props) {
  return (
    <div>
      <DeepChildComponent {...props} />
    </div>
  );
}

export default MiddleComponent;

import React from 'react';

function DeepChildComponent(props) {
  return (
    <div>
      <p>{props.data}</p>
      <p>Color: {props.color}</p>
      <p>Size: {props.size}</p>
    </div>
  );
}

export default DeepChildComponent;

在这个例子中，ParentComponent使用展开运算符{…config}将config对象中的所有属性作为 props 传递给MiddleComponent。MiddleComponent同样使用展开运算符将所有 props 传递给DeepChildComponent。这种方式可以减少代码冗余，特别是当需要传递多个 props 时。

props 透传的使用场景

虽然 props 透传可能导致代码冗余，但在某些情况下，它仍然是合适的解决方案：

简单的组件结构：当组件嵌套层次较浅时，props 透传是一种简单直接的方法
临时数据传递：当需要传递的数据只在特定情况下使用，或者是临时需求时
保持组件纯净：当中间组件希望保持纯净，不处理任何业务逻辑时
避免引入额外依赖：当不希望引入像 Redux 或 Context 这样的状态管理工具时

props 透传的缺点

尽管 props 透传是一种合法的 React 模式，但它也存在一些缺点：

代码冗余：中间组件需要重复传递 props，增加了代码量
维护困难：当传递的 props 数量增加或结构变化时，所有中间组件都需要更新
组件间耦合：增加了组件之间的耦合度，使得组件更难独立使用
可读性降低：组件的 props 列表可能变得很长，难以理解每个 prop 的用途
重构风险：如果组件结构发生变化，props 透传的路径可能需要大量修改

替代 props 透传的方案

为了解决 props 透传带来的问题，React 提供了几种替代方案：

使用 Context API

React 的 Context API 允许组件在不通过 props 透传的情况下共享数据。这对于需要在多个组件之间共享的数据非常有用。

使用 Context API：

import React, { createContext, useContext } from 'react';

// 创建Context
const DataContext = createContext();

// 父组件
function ParentComponent() {
  const data = "Hello from context!";
  
  return (
    <DataContext.Provider value={data}>
      <MiddleComponent />
    </DataContext.Provider>
  );
}

// 中间组件
function MiddleComponent() {
  return (
    <div>
      <DeepChildComponent />
    </div>
  );
}

// 深层子组件
function DeepChildComponent() {
  const data = useContext(DataContext);
  
  return (
    <div>
      <p>{data}</p>
    </div>
  );
}

在这个例子中，ParentComponent通过DataContext.Provider提供数据，DeepChildComponent使用useContext钩子直接获取数据，无需通过中间组件传递 props。

使用状态提升

状态提升是将共享状态移动到最近的共同祖先组件的过程，这样需要该状态的组件可以通过 props 接收它，而无需深层传递。

状态提升：

import React, { useState } from 'react';

function ParentComponent() {
  const [data, setData] = useState("Hello from parent!");
  
  return (
    <div>
      <DeepChildComponent data={data} />
    </div>
  );
}

function DeepChildComponent(props) {
  return (
    <div>
      <p>{props.data}</p>
    </div>
  );
}

在这个例子中，data状态被提升到了ParentComponent，DeepChildComponent可以直接通过 props 接收data，无需经过中间组件。

使用状态管理库

对于大型应用，可以考虑使用状态管理库如 Redux、Recoil 或 Jotai 来管理全局状态，避免 props 透传的问题。

使用 Redux：

// 定义action类型
const SET_DATA = 'SET_DATA';

// 定义reducer
function dataReducer(state = '', action) {
  switch (action.type) {
    case SET_DATA:
      return action.payload;
    default:
      return state;
  }
}

// 创建store
const store = createStore(dataReducer);

// 父组件
function ParentComponent() {
  const dispatch = useDispatch();
  
  useEffect(() => {
    dispatch({ type: SET_DATA, payload: "Hello from redux!" });
  }, [dispatch]);
  
  return (
    <div>
      <DeepChildComponent />
    </div>
  );
}

// 深层子组件
function DeepChildComponent() {
  const data = useSelector(state => state);
  
  return (
    <div>
      <p>{data}</p>
    </div>
  );
}

在这个例子中，数据被存储在 Redux store 中，ParentComponent通过 dispatch action 更新数据，DeepChildComponent通过useSelector钩子直接获取数据，无需通过 props 传递。

重构组件层次结构

有时候，通过重构组件层次结构，可以减少或消除 props 透传的需要。例如，将中间组件的功能合并到父组件或子组件中，或者创建新的组件来封装相关功能。

重构前的组件结构：

ParentComponent
  ↳ MiddleComponent
    ↳ DeepChildComponent

重构后的组件结构：

ParentComponent
  ↳ DeepChildComponent

在这个例子中，MiddleComponent被移除，ParentComponent直接与DeepChildComponent通信，消除了 props 透传的需要。

何时选择 props 透传

虽然有多种替代方案，但 props 透传在某些情况下仍然是合适的选择：

简单应用：对于小型应用或简单组件结构，props 透传可能是最简单的解决方案
短期项目：在快速原型开发或短期项目中，props 透传可以节省时间
避免引入额外复杂性：如果项目不需要复杂的状态管理，props 透传可以避免引入额外的依赖
学习目的：对于初学者，理解 props 透传有助于掌握 React 的基本数据流动机制

classname 属性传递与合并

在 React 开发中，处理组件的 class 名称是一个常见的任务。父组件经常需要向子组件传递 class 名称，以控制子组件的样式。同时，子组件可能有自己的默认 class 名称，需要与父组件传递的 class 名称进行合并。本节将详细介绍如何在 React 中处理 classname 属性的传递与合并。

基本的 classname 传递

父组件可以通过 classname prop 向子组件传递 class 名称，子组件可以将其应用到自身的 DOM 元素上。

父组件代码

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

function ParentComponent() {
  return (
    <div>
      <ChildComponent className="parent-class" />
    </div>
  );
}

export default ParentComponent;

子组件代码

import React from 'react';

function ChildComponent(props) {
  return (
    <div className={props.className}>
      Child Component
    </div>
  );
}

export default ChildComponent;

在这个例子中，父组件通过className prop 向子组件传递了一个名为parent-class的 class 名称。子组件将这个 class 名称应用到了自身的 div 元素上。渲染后的 HTML 将包含这个 class 名称：

<div class="parent-class">Child Component</div>

子组件的默认 class 名称

子组件通常有自己的默认 class 名称，用于定义基本的样式。父组件传递的 class 名称应该与子组件的默认 class 名称合并，以实现样式的叠加。

子组件代码

import React from 'react';

function ChildComponent(props) {
  const defaultClassName = 'child-component';
  return (
    <div className={defaultClassName}>
      Child Component
    </div>
  );
}

export default ChildComponent;

在这个例子中，子组件有一个默认的child-component class 名称。渲染后的 HTML 将只包含这个默认 class 名称：

<div class="child-component">Child Component</div>

合并父组件传递的 class 和子组件的默认 class

为了同时应用父组件传递的 class 和子组件的默认 class，我们需要将它们合并为一个字符串。

子组件代码

import React from 'react';

function ChildComponent(props) {
  const defaultClassName = 'child-component';
  const combinedClassName = `${defaultClassName} ${props.className}`;
  
  return (
    <div className={combinedClassName}>
      Child Component
    </div>
  );
}

export default ChildComponent;

在这个例子中，子组件将defaultClassName和props.className合并为一个字符串，中间用空格分隔。如果父组件传递了parent-class，渲染后的 HTML 将包含两个 class 名称：

<div class="child-component parent-class">Child Component</div>

使用条件逻辑动态添加 class

有时候，我们需要根据某些条件动态地添加或移除 class 名称。可以使用条件逻辑来实现这一点。

子组件代码

import React from 'react';

function ChildComponent(props) {
  const defaultClassName = 'child-component';
  let combinedClassName = defaultClassName;
  
  if (props.isActive) {
    combinedClassName += ' active';
  }
  
  if (props.isLarge) {
    combinedClassName += ' large';
  }
  
  if (props.className) {
    combinedClassName += ` ${props.className}`;
  }
  
  return (
    <div className={combinedClassName}>
      Child Component
    </div>
  );
}

ChildComponent.propTypes = {
  isActive: PropTypes.bool,
  isLarge: PropTypes.bool,
  className: PropTypes.string
};

export default ChildComponent;

在这个例子中，子组件根据isActive和isLarge props 的值动态添加active和large class 名称。父组件可以通过传递这些 props 来控制子组件的样式：

<ChildComponent isActive isLarge className="parent-class" />

渲染后的 HTML 将包含四个 class 名称：

<div class="child-component active large parent-class">Child Component</div>

使用 classnames 库简化 class 合并

手动合并 class 名称可能会变得复杂，特别是当条件较多时。classnames库可以帮助我们更简洁地处理 class 名称的合并。

安装 classnames 库：

npm install classnames
# 或者
yarn add classnames

使用 classnames 库的子组件

import React from 'react';
import classNames from 'classnames';

function ChildComponent(props) {
  const classes = classNames(
    'child-component',
    { active: props.isActive },
    { large: props.isLarge },
    props.className
  );
  
  return (
    <div className={classes}>
      Child Component
    </div>
  );
}

ChildComponent.propTypes = {
  isActive: PropTypes.bool,
  isLarge: PropTypes.bool,
  className: PropTypes.string
};

export default ChildComponent;

在这个例子中，classNames函数接受多个参数，可以是字符串、对象或数组。对象的键是 class 名称，值是布尔值，表示是否添加该 class。这种方式使代码更加简洁和易于维护。

处理冲突的 class 名称

当父组件传递的 class 名称与子组件的默认 class 名称或动态添加的 class 名称冲突时，后面的 class 名称会覆盖前面的。例如，如果子组件有一个默认的color-red class，而父组件传递了color-blue，则后面的color-blue会覆盖前面的color-red。

处理冲突：

import React from 'react';
import classNames from 'classnames';

function ChildComponent(props) {
  const classes = classNames(
    'child-component',
    'color-red',
    { active: props.isActive },
    props.className
  );
  
  return (
    <div className={classes}>
      Child Component
    </div>
  );
}

ChildComponent.propTypes = {
  isActive: PropTypes.bool,
  className: PropTypes.string
};

// 父组件使用方式
<ChildComponent isActive className="color-blue" />

在这个例子中，color-blue会覆盖color-red，最终的 class 列表中只有color-blue会生效。

传递多个 class 名称

父组件可以传递多个 class 名称，用空格分隔，子组件会将它们与自己的 class 名称合并。

父组件代码

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

function ParentComponent() {
  return (
    <div>
      <ChildComponent className="parent-class-1 parent-class-2" />
    </div>
  );
}

export default ParentComponent;

子组件代码

import React from 'react';
import classNames from 'classnames';

function ChildComponent(props) {
  const classes = classNames(
    'child-component',
    props.className
  );
  
  return (
    <div className={classes}>
      Child Component
    </div>
  );
}

export default ChildComponent;

在这个例子中，父组件传递了两个 class 名称：parent-class-1和parent-class-2。子组件将它们与自己的child-component class 合并，最终的 class 列表为：

<div class="child-component parent-class-1 parent-class-2">Child Component</div>

在组件库中处理 classname

在开发可复用的组件库时，classname 的处理尤为重要。组件库中的组件应该允许用户通过 classname prop 自定义样式，同时保持自身的默认样式。

组件库中的组件

import React from 'react';
import classNames from 'classnames';

export default function Button({
  children,
  className,
  variant = 'primary',
  size = 'medium',
  ...rest
}) {
  const classes = classNames(
    'button',
    `button--${variant}`,
    `button--${size}`,
    className
  );
  
  return (
    <button className={classes} {...rest}>
      {children}
    </button>
  );
}

在这个组件库按钮的示例中，组件接受variant和size props，生成对应的 class 名称（如button–primary、button–medium）。同时，它还接受className prop，允许用户添加自定义的 class 名称。组件将所有这些 class 名称合并后应用到按钮元素上。

用户可以这样使用这个按钮组件：

<Button variant="secondary" size="large" className="custom-button">
  Click Me
</Button>

最终的 class 列表将包括button、button–secondary、button–large和custom-button。

以上就是本文的全部内容啦，想了解更多 P5.js 用法欢迎关注《React 中文教程》。

可以➕我 green bubble 吹吹水咯

在这里插入图片描述

点赞 + 关注 + 收藏 = 学会了

『React』 组件通信全攻略

props 可以接收哪些类型的值

基本数据类型传递

对象和数组类型传递

函数类型传递

JSX 元素传递

深入研究一下给 props 传递 JSX

传递单个 JSX 元素

传递多个 JSX 元素

使用 children 属性传递 JSX

动态渲染传递的 JSX 元素

向子组件传递组件类型

验证 props 类型

安装 prop-types 库

基本类型验证

复杂类型验证

函数类型验证

自定义验证函数

可选 props 和默认值

使用 TypeScript 进行类型检查

利用 children 让子组件给父组件传值

常规回调函数方法回顾

利用 children 属性传递回调函数

children 作为函数的使用模式

传递多个参数

使用对象传递复杂数据

children 作为函数的优缺点

与常规回调方法的比较

中间组件透传（props 透传）

props 透传的基本概念

props 透传的使用场景

props 透传的缺点

替代 props 透传的方案

使用 Context API

使用状态提升

使用状态管理库

重构组件层次结构

何时选择 props 透传

classname 属性传递与合并

基本的 classname 传递

子组件的默认 class 名称

合并父组件传递的 class 和子组件的默认 class

使用条件逻辑动态添加 class

使用 classnames 库简化 class 合并

处理冲突的 class 名称

传递多个 class 名称

在组件库中处理 classname

网站公告

今日签到

热门文章

最新发布

『React』组件通信全攻略