在 React 中将 props 传递给孩子

1. 在 React 中将 props 传递给孩子
2. 使用 Context API 将 props 传递给 React 中的孩子
3. 在 React 中使用 React.cloneElement() 将 props 传递给儿童

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

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

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

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

在 React 中将 props 传递给孩子

假设你有通过 props.children 接收的子元素。要显示它们，你需要在 return 语句中包含 props.children 或 this.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 中的元素或组件怎么办？在我们的示例中，我们可能需要为文本指定 color 或 fontSize 属性。

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

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

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

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

从技术上讲，Context 与 props 不同，但它可以在我们的情况下完成工作。为此，我们将使用可在所有 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。