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

Question

我是反应的绝对初学者。我必须将特定属性传递给 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

反应上下文

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

您需要React.context从以下位置导入react

句法：

// context.js

import React, { createContext } from "react"

export const MyContext = React.createContext(null);

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

句法：

// 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可以访问props由 提供的该值MyContext.Provider。现在您可以简单地将这些值传递给您的子组件。

句法：

// 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>
  )
}