我想通过提供一个非常简单的示例沿着关于Context hook的React文档，在上下文API方面向@ GODWINGODWIN注解添加更多内容
通常在实践中，人们倾向于在App.js处 Package 提供者，为了简单起见，我将在index.js文件处 Package 。

源代码/索引.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';

import App from './App'
import { ModalProvider } from './context/ModalContext'

ReactDOM.createRoot( 
  document.querySelector('#root')
).render(
  /**
   * @dev Note everything inside ModalPrivder has access
   * to the values provided, such as open, setOpen
   */
  <ModalProvider>
    <App />
  </ModalProvider>
)

源代码/上下文/模态上下文.jsx

import React, {useState, createContext, useContext } from 'react'

/**
 * @dev inside your createContext object you can pass in
 * default values that will be passed in value at provider
 */
export const ModalContext = createContext({
 open: false
})

/**
 * @dev your provider will enable you to access value all your
 * children components. NOTE it will not be able to access your
 * parent components.
 */
export function ModalProvider(props) {
  const [open, setOpen] = useState(false)

  return (
    <ModalContext.Provider value={{ open, setOpen }}>
      {props.children}
    </ModalContext.Provider>
  )
}

源代码/组件/模式.jsx

import { useContext } from 'react'

function Modal(props) {
  const { open, setOpen } = useContext(ModalContext)

  return (
    <>
      { open ? 
        (<div>
          <p>test</p>
          <>{props.children}</>
          <button onClick={() => setOpen(false)}>Close Close</button>
        </div>) : 
        (<button onClick={() => setOpen(true)}>Open Modal</button>)
      }
    </>
  )
}

export default Modal

源代码/应用程序.jsx

function App(props) {
  return (
    <div className='App'>
      <h1>Hello React.</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Modal>
        <p> You see content here</p>
      </Modal>
    </div>
  );
}

export default App

我希望这给予你一个很好的方向如何使用React的上下文挂钩，请注意，这是一个非常基本的源代码，以了解如何props.children的工作原理和context挂钩。

您可以尝试以下操作：

import React from "react";

function Eexample() {
  const ViewDetails = (item) => () => {
      console.log(item);
      toggleModal();
      return (
          <Modal item={item} /> //This is passing item into the Modal component
      )
  };
  return <div>
    {ViewDetails}  {/*This returns the function viewDetails*/}
  </div>;
}

export default Eexample;

对于模态构件：

function Modal({ item }) {  // with this distructuring, you can use the item inside the Modal component
        return (
            <Layout title="Dashboard" className="container-fluid">
               {<Modal open={modalStatus} onClose={() => setModalStatus(false)} />}
               <div className="row">
                  <div className="col-sm-3">
                     <UserLinks />
                  </div>
                  <div className="col-sm-9">
                      <UserInfo />
                      {orders ? <PurchaseHistory /> : ""}
                  </div>
               </div>
            </Layout>
         )
      }

或者考虑使用上下文API，它使您能够将项目调度到reducer.js文件，并使用StateProvider.js文件将其拉入Modal组件。

您必须获取此项目的状态。当从该函数内部触发viewDetails函数时，您可以在将此状态作为props传递给任何组件后，使用此项目设置此状态