在 React 中将 props 传递给孩子
- 在 React 中将 props 传递给孩子
-
使用
Context
API 将 props 传递给 React 中的孩子 -
在 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。
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