在 React 中将 props 传递给孩子

Irakli Tchigladze 2023年1月30日 2022年5月18日
  1. 在 React 中将 props 传递给孩子
  2. 使用 Context API 将 props 传递给 React 中的孩子
  3. 在 React 中使用 React.cloneElement() 将 props 传递给儿童
在 React 中将 props 传递给孩子

React 开发人员依靠组件的可重用性来构建功能强大且可维护的应用程序。

react 库具有组合模型,这增加了利用可重用组件的灵活性。在某些情况下,你无法预测组件的子组件将是什么。

例如,在构建消息应用程序时,你的对话框可能包含表情符号和一段文本。

React 提供了一个 props.children 特性来增加组件的可重用性。简单来说,React 开发人员可以使用 this.props.children 来显示放置在父组件的开始和结束标记之间的值(通常是 UI 元素)。

在 React 中将 props 传递给孩子

假设你有通过 props.children 接收的子元素。要显示它们,你需要在 return 语句中包含 props.childrenthis.props.children(用于类组件)。

这是一个包含三个组件的示例:顶部的父组件 App 和带有子 Text 组件的 Box 组件。让我们来看看:

class App extends Component {
  render() {
    return <Box>
            <Text></Text>
           </Box>;
  }
}

class Box extends Component {
  render() {
    return <div>{this.props.children}</div>;
  }
}
class Text extends Component {
  render() {
    return <p>Welcome to App</p>;
  }
}

但是如果你需要将额外的 props 传递给包含在 props.children 中的元素或组件怎么办?在我们的示例中,我们可能需要为文本指定 colorfontSize 属性。

让我们探索两个很好的选择来做到这一点。

使用 Context API 将 props 传递给 React 中的孩子

Context 允许你将 props 传递给整个组件树。它非常有用,因为你在顶部有一个 App 组件,但想要将事件处理程序传递给树底部的子组件。

你可以手动传递它,但这会非常耗时且难以追踪。相反,你可以使用 Context 使每个子组件中的值都可用。

从技术上讲,Contextprops 不同,但它可以在我们的情况下完成工作。为此,我们将使用可在所有 React 应用程序中使用的 React.createContext() 方法。

首先,我们定义一个变量来存储 Context 实例:

import React, { Component } from 'react';
import { render } from 'react-dom';
const SampleContext = React.createContext()
class App extends Component {
  render() {
    return <Box>
            <Text></Text>
           </Box>;
  }
}

请注意,该变量是在类组件的范围之外创建的。

我们找到显示 this.props.children 的组件并用 <SampleContext.Provider> 包裹它。包装器的开始和结束标记之间的所有内容都可以访问我们定义的值。

然后我们指定值:

class Box extends Component {
  render() {
    return <SampleContext.Provider value={{color: "red"}}>
          {this.props.children}
          </SampleContext.Provider>;
  }
}

现在,我们转到像 this.props.children 这样被传递的组件,并将 contextType 属性设置为等于我们最初创建的变量:

class Text extends Component {
  static contextType = SampleContext
  render() {
    return <p style={{color: this.context.color}}>Welcome to App</p>;
  }
}

一旦我们这样做了,我们就可以从 Context 访问值。在这种情况下,我们定义了一个内联样式对象并将 color 属性设置为 this.context.color,红色。

文本确实是红色,如播放代码中所见。你可以尝试自己编辑代码,方法是在 Context 中添加或删除属性并查看它是否有效。

在 React 中使用 React.cloneElement() 将 props 传递给儿童

或者,你也可以使用 cloneElement() 方法将自定义 props 添加到你的 props.children 中的元素或组件。我们来看一个例子,消化一下:

<>{React.cloneElement(props.children, {color: "red"})}</>

在我们的示例中,该方法接受两个参数。首先,我们必须传递给它 props.children,它将用作克隆的起点。这意味着克隆的元素将拥有原始元素的所有 props

cloneElement() 方法还保留了 refs,这在与 DOM 交互时很重要。

作为第二个参数,我们必须传递我们希望组件接收的所有附加 props。在这种情况下,我们将传递一个值为 "red"color prop。

Irakli Tchigladze avatar Irakli Tchigladze avatar

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

LinkedIn

相关文章 - React Props