Javascript 下一个JS布局组件，将道具传递给孩子们

我发现了一段代码，它解决了我在下一次JS重新呈现页面时遇到的问题。但现在我需要向儿童组件发送道具。我不知道如何在这里工作，这是我的layout.js代码。正如你们所看到的，我可以发送道具到标题组件，但对于孩子们，我不知道如何发送，因为它是一个变量，而不是一个组件

import Header from "../components/header";
import Footer from "../components/footer";
import { Fragment } from "react";

export default function Layout({ children, ...pageProps }) {
  return (
    <Fragment>
      <Header
        isRegisterPage={pageProps.isRegisterPage}
        isLoginPage={pageProps.isLoginPage}
        outHome={pageProps.outHome}
      />
      {children}
      <Footer />
    </Fragment>
  );
}

从“./组件/标题”导入标题；
从“./组件/页脚”导入页脚；
从“react”导入{Fragment}；
导出默认函数布局（{children，…pageProps}）{
返回(
{儿童}
);
}

---

感谢您的帮助

您是否考虑过使用React的上下文API？其思想是，当使用上下文API时，组件的状态会被提升，以便在全局范围内进行管理。如果一个组件需要一个道具，而不是手动传递道具（道具钻取），您可以简单地将您的组件包装在所谓的上下文提供程序中。这将允许该组件访问应用程序的全局状态。这是好的，因为当应用程序变得更大时，您可能需要通过许多组件传递道具，这些组件可能会造成混乱并增加不必要的混乱

React提供了一些很棒的文档来设置React应用程序以使用上下文API。强烈推荐你去看看

---

您可以使用React的

cloneElement

来实现这一点

React.cloneElement(children, {
    isRegisterPage: pageProps.isRegisterPage,
    isLoginPage: pageProps.isLoginPage,
    outHome: pageProps.outHome
})

在您的案例中完成以下示例：

import Header from "../components/header";
import Footer from "../components/footer";
import React, { Fragment } from "react";

export default function Layout({ children, ...pageProps }) {
  return (
    <Fragment>
      <Header
        isRegisterPage={pageProps.isRegisterPage}
        isLoginPage={pageProps.isLoginPage}
        outHome={pageProps.outHome}
      />
      {
          React.cloneElement(children, {
              isRegisterPage: pageProps.isRegisterPage,
              isLoginPage: pageProps.isLoginPage,
              outHome: pageProps.outHome
          })
      }
      <Footer />
    </Fragment>
  );
}

从“./组件/标题”导入标题；
从“./组件/页脚”导入页脚；
从“React”导入React，{Fragment}；
导出默认函数布局（{children，…pageProps}）{
返回(
{
反应。克隆元素（儿童{
isRegisterPage:pageProps.isRegisterPage，
isLoginPage:pageProps.isLoginPage，
outHome:pageProps.outHome
})
}
);
}

试试这个

import Header from "../components/header";
import Footer from "../components/footer";
import { Fragment } from "react";

export default function Layout({ children, ...pageProps }) {

  function recursiveMap(children, fn) {
    return React.Children.map(children, child => {
      if (!React.isValidElement(child) || typeof child.type == 'string') {
        return child;
      }
  
      if (child.props.children) {
        child = React.cloneElement(child, {
          children: recursiveMap(child.props.children, fn)
        });
      }
  
      return fn(child);
    });
  }

  // Add props to all child elements.
  const childrenWithProps = recursiveMap(children, child => {
    // Checking isValidElement is the safe way and avoids a TS error too.
    if (isValidElement(child)) {
      // Pass additional props here
      return cloneElement(child, { currentUser: { ...user } })
    }

    return child;
  });

  return (
    <Fragment>
      <Header
        isRegisterPage={pageProps.isRegisterPage}
        isLoginPage={pageProps.isLoginPage}
        outHome={pageProps.outHome}
      />
      {childrenWithProps}
      <Footer />
    </Fragment>
  );
}

从“./组件/标题”导入标题；
从“./组件/页脚”导入页脚；
从“react”导入{Fragment}；
导出默认函数布局（{children，…pageProps}）{
函数递归映射（子类，fn）{
返回React.Children.map（Children，child=>{
如果（！React.isValidElement（child）| | typeof child.type=='string'）{
返回儿童；
}
if（child.props.children）{
child=React.cloneElement（child{
子对象：递归映射（child.props.children，fn）
});
}
返回fn（儿童）；
});
}
//向所有子元素添加道具。
const childrenWithProps=recursiveMap（children，child=>{
//检查isValidElement是安全的方法，也可以避免TS错误。
if（有效删除（子项））{
//在这里传递额外的道具
返回cloneElement（子元素，{currentUser:{…user}}）
}
返回儿童；
});
返回(
{childrenWithProps}
);
}

这是redux（本质上是使用优秀开发工具的react-context）的亮点-维护一个全局状态变量，该变量由任何想要使用它的组件使用（通过react-context和

useSelector

），而不是道具钻取。嘿，Akshit，欢迎使用堆栈溢出！为这个问题提供解决方案是一个很好的开始，但是试着解释一下为什么这个解决方案有效，这样Joangel和其他阅读你答案的人也能理解这个解决方案。这对于那些没有完全相同的代码但有类似问题的人来说尤其有用。