如何把道具传递给{这个道具。孩子}

在React中，组件之间的信息传递是非常重要的一部分。通常情况下，我们会使用props属性来实现这种传递。但是，当你需要将数据从父组件传递到孙子组件时，使用props可能变得不够灵活。这时候就需要使用React的上下文（Context）特性。

1. React上下文简介

React上下文提供了一种在组件树中共享数据的方式。它允许您将数据存储在一个地方，然后在整个组件树中任何地方都可以访问该数据，而无需手动将其作为props传递。

2. 创建和使用React上下文

创建一个上下文对象很简单：

const MyContext = React.createContext(defaultValue);

defaultValue是可选的。它定义了在没有匹配的Provider组件时，Context所使用的默认值。

接下来，在组件中使用该上下文，需要先在组件的顶部导入上下文：

import { MyContext } from './context';

然后，使用Provider组件包含需要共享的数据：

<MyContext.Provider value={/* some value */}>
  {/* children components */}
</MyContext.Provider>

注意，所有的子组件都可以通过useContext钩子或者Consumer组件获取这个Context。

// useContext 钩子
const someValue = useContext(MyContext);

// Consumer 组件
<MyContext.Consumer>
  {someValue => /* render something with `someValue` */}
</MyContext.Consumer>

3. 实际应用

现在，我们以一个实际的例子来演示如何使用React上下文进行数据传递。假设有一个父组件，它包含一个孙子组件，需要将某些数据传递给它。如果我们使用props，这意味着我们必须在每个中间组件上都增加一层props传递。但是，如果使用上下文，就会变得简单很多。

首先，我们创建一个Context对象：

const MyContext = React.createContext();

然后，在父组件中，我们定义要共享的数据，并将其作为Context的值提供：

function ParentComponent() {
  const [data, setData] = useState('Hello from Parent');
  return (
    <MyContext.Provider value={data}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

在这里，我们将字符串'Hello from Parent'存储在state中，然后传递给了Context。

接下来，我们创建孙子组件，并从Context中获取这个值：

function GrandchildComponent() {
  const data = useContext(MyContext);
  return <div>{data}</div>;
}

这样，我们就成功地将数据从父组件传递到了孙子组件。

4. 总结

通过使用React上下文，我们可以将数据从父组件传递到孙子组件，而无需通过中间组件的props传递。这种技术在某些情况下非常有用，但是也需要谨慎使用。如果您不小心滥用上下文，可能会导致代码难以维护和理解。

示例代码：https://codepen.io/chatgpt/pen/PojvZjK

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8184