如何将特定的 属性 传递给反应中的所有子组件？

Question

我绝对是 React 的初学者。我必须将特定的 属性 传递给 div 内的所有组件，而不是将它们传递给 individual， 例如，而不是这样做：

 function App() {
    return (
      <div>
        <Component1 props = {propObject}/>
        <Component2 props = {propObject}/>
        <Component3 props = {propObject}/>
      </div>
    );
}

我怎样才能实现这样的目标？ :

function App() {
  return (
    <div props={propObject}>
      <Component1 />
      <Component2 />
      <Component3 />
    </div>
  );
}

Answer 1

您可以使用 ThemeProvider:

function App() {
      return (
        <ThemeProvider props = {propObject}>
          <Component1 />
          <Component2 />
          <Component3 />
        </ThemeProvider >
      );
    }

Answer 2

React Context

提供了一种将值共享给子组件的方法，而无需通过树的每个级别显式传递 prop。

您需要从 react

导入 React.context

语法：

// context.js

import React, { createContext } from "react"

export const MyContext = React.createContext(null);

现在您需要创建此上下文的提供者，以将当前上下文值传递给下面的树。所以你需要用 React.Provider.

包裹你所有的 child component

语法：

// MainComponent.js
import { MyContext } from "./context"
import { ChildComponent1, ChildComponent2, ChildComponent3 } from "./childcomponent" 

const MainComponent = () => {
  const myObject = {name: "John"}

  return (
    <MyContext.Provider props={myObject}>
      <ChildComponent1 />
      <ChildComponent2 />
      <ChildComponent3 />
    </MyContext.Provider>
  )
}

现在 MainComponent 的所有子组件都可以访问由 MyContext.Provider 提供的 props 值。现在您可以简单地将这些值传递给您的子组件。

语法：

// childcomponent.js
import React, { useContext } from "react"
import { MyContext } from "./context"

export const ChilcComponent1 = () => {
  const props = useContext(MyContext)
  return (
    <p>
      My name is: {props?.key}
    </p>
  )
}