在React中，组件之间的信息传递是非常重要的一部分。通常情况下，我们会使用props属性来实现这种传递。但是，当你需要将数据从父组件传递到孙子组件时，使用props可能变得不够灵活。这时候就需要使用React的上下文（Context）特性。
1. React上下文简介
React上下文提供了一种在组件树中共享数据的方式。它允许您将数据存储在一个地方，然后在整个组件树中任何地方都可以访问该数据，而无需手动将其作为props传递。
2. 创建和使用React上下文
创建一个上下文对象很简单：
----- --------- - ----------------------------------
defaultValue是可选的。它定义了在没有匹配的Provider组件时，Context所使用的默认值。
接下来，在组件中使用该上下文，需要先在组件的顶部导入上下文：
------ - --------- - ---- ------------
然后，使用Provider组件包含需要共享的数据：
------------------- --------- ---- ----- ---- --- -------- ---------- --- ---------------------
注意，所有的子组件都可以通过useContext钩子或者Consumer组件获取这个Context。
-- ---------- -- ----- --------- - ---------------------- -- -------- -- -------------------- ---------- -- -- ------ --------- ---- ----------- --- ---------------------
3. 实际应用
现在，我们以一个实际的例子来演示如何使用React上下文进行数据传递。假设有一个父组件，它包含一个孙子组件，需要将某些数据传递给它。如果我们使用props，这意味着我们必须在每个中间组件上都增加一层props传递。但是，如果使用上下文，就会变得简单很多。
首先，我们创建一个Context对象：
----- --------- - ----------------------
然后，在父组件中，我们定义要共享的数据，并将其作为Context的值提供：
-------- ----------------- -
----- ------ -------- - --------------- ---- ---------
------ -
------------------- -------------
--------------- --
---------------------
--
-在这里，我们将字符串'Hello from Parent'存储在state中，然后传递给了Context。
接下来，我们创建孙子组件，并从Context中获取这个值：
-------- --------------------- - ----- ---- - ---------------------- ------ ------------------ -
这样，我们就成功地将数据从父组件传递到了孙子组件。
4. 总结
通过使用React上下文，我们可以将数据从父组件传递到孙子组件，而无需通过中间组件的props传递。这种技术在某些情况下非常有用，但是也需要谨慎使用。如果您不小心滥用上下文，可能会导致代码难以维护和理解。
示例代码：https://codepen.io/chatgpt/pen/PojvZjK
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/8184