React/Next.js 如何向Layout组件传递子组件解决对象不能作为React child报错

你出现报错的核心原因是3处React组件的语法不符合规范，按以下步骤修改即可解决：

• 修正MainLayout的参数解构
  函数组件的第一个参数是完整的props对象，你之前直接把props对象命名为children渲染，才会触发「带children键的对象无法作为React子元素」的报错，修改后代码：

  function MainLayout({ children }) {
      return(
          <div>
              <Header />
              {children}
              <Footer />
          </div>
      );
  }
  
  export default MainLayout;
  

• 修正MainPage中Layout的传参方式
  不能直接把Navbar组件函数赋值给children属性，需要将Navbar渲染为JSX元素后传入，推荐使用嵌套写法更符合React开发规范，修改后代码：

  import {default as Layout} from './MLayout.js';
  import {default as Navbar} from './MNavbar.js';    
  function MainPage() {
      return(
          <div>
              <Layout>
                  <Navbar />
              </Layout>
          </div>
      );
  }
  
  export default MainPage;
  

• 修正Navbar组件的参数写法
  React函数组件只有第一个参数是props对象，第二个参数仅在使用forwardRef时接收ref实例，你额外加的第二个参数属于无效语法，如果需要接收children直接在第一个props里解构即可，修改后代码：

  import { useState } from 'react';
  // 如果需要使用传入Navbar的子元素，就把参数改为({ children, ...props })即可
  const Navbar = (props) => {
      const [login, makeLogin] = useState(false);
  
      function Login(){
          makeLogin(true);
      }
  
      if (login) {
          return (
              <div>
                  <LoginPage />
              </div>
          )
      } else {
          // 原有导航栏按钮渲染逻辑
          return (<div>常规导航栏按钮内容</div>);
      }
  };
  
  export default Navbar;
  

内容的提问来源于stack exchange，提问作者avnav99