reactjs - React - 将 Prop 传递给特定的 child

Question

我有一个布局组件如下:

    import React, { useRef, useEffect, useState } from "react"
    import Navbar from "./Navbar"
    import "../styles/mains.scss"
     
     const Layout = ({ children }) => {
    
       return (
         <>
           <Navbar></Navbar>
           <main>
           {children}
           </main>
         </>
       )
     }
     export default Layout

我在 Home 组件和其他地方使用带有一些嵌套子项的 Layout:

import React from "react";
import Layout from "./layout";
import Header from "./Header";
import Work from "./Work";
import About from "./about";
import Footer from "./Footer";

  
export const Home = () => {
  return (
      <Layout>
        <Header/>
        <Work/>
        <About/>
        <Footer/>
      </Layout>
  );
};

我现在有一个要求，我将 Prop 传递给特定的 child 。具体来说，我需要将一个函数传递到我的子 Work 组件中。但是我不知道如何解析子组件并有条件地将函数传递给特定的子组件(如果存在)。请注意，在许多情况下，Layout 不会将 Work 组件作为子组件。

Answer 1

您可以使用 Context API在组件之间有一个干净的契约(Contract)。请注意，除了要求 Layout 组件位于顶部之外，此解决方案没有对您的组件树做出任何假设，这使得组件之间的依赖关系更加简单。

以下是如何应用到您的示例中:

在您的 Layout 组件上，使用 Context API 将值向下传递到组件树中，在本例中是您想要的功能。我在这里将此函数称为 doSomething:

// file: layout.js
import { createContext, useCallback } from "react";

const LayoutContext = createContext();
LayoutContext.displayName = "LayoutContext";

export const Layout = ({ children }) => {
  
  // Here we use `useCallback` to make sure that
  // our function identity is the same between renders
  const doSomething = useCallback(() => {
    console.log("do something from context");
  }, []);

  return (
    <LayoutContext.Provider value={{ doSomething }}>
      <div>
        <h1>Layout header</h1>
        {children}
      </div>
    </LayoutContext.Provider>
  );
};

现在您可以创建一个自定义 Hook ，使跨组件更轻松地使用这个新创建的上下文。

在 layout.js 文件的底部，添加以下内容:

import { useContext } from 'react'

export function useDoSomething() {
  const context = useContext(LayoutContext);

  // Here we check if the context is available
  // otherwise, it's probably due to the `Layout`
  // component not being on the top of the component tree.
  if (typeof context === "undefined") {
    throw new Error(
      "doSomething is not available on your component tree" +
       "\n" +
       "Make sure to use `Layout` before using `useDoSomething` hook"
    );
  }
  return context;
}

现在在您的 Work 组件上，您可以使用我们新创建的自定义 Hook 来获取您需要的功能。

// file: work.js
import { Layout, useDoSomething } from "./Layout";

export const Work = () => {
  
  // Here you can consume the context via our
  // custom hook.
  const { doSomething } = useDoSomething();

  doSomething();

  return <h1>Work component</h1>;
};

下面是顶级组件的样子:

// file: app.js
import {Layout} from './layout'
import {Work} from './work'
 
export default function App() {
  return (
    <Layout>
      <Work />
    </Layout>
  );
}