如何使一个对象通过作为一个孩子

Question

学习反应/nextjs…我有一个主布局，它只包括两个组件——页脚和页眉。

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

我想让这个布局像这样坐在主页:

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

export default MainPage;

，并在主页内，我想在页脚和页眉之间插入一个导航条。导航条稍后会改变，所以我想把它保留为子元素。

我使用的导航栏不使用链接，而是使用按钮:

const Navbar = (props, {children}) => {
const [login, makeLogin] = useState(false);
function Login(){
makeLogin(true);
}
if (login) {
return (
<div>
<LoginPage />
</div>
)
}
else {
return ( blah blah blah the regular nav bar buttons.
);
}};

我得到的错误:

Unhandled Runtime Error
Error: Objects are not valid as a React child (found: object with keys {children}). If you meant to render a collection of children, use an array instead.

Answer 1

将<Navbar/>作为MainPage中的子元素传递给

<MainLayout children={<Navbar />} />

得到{ children }

function MainLayout({ children }) {...}

Answer 2

通过将MainLayout和Navbar组件包装在花括号中来解构它们:

function MainLayout({ children }) {

const Navbar = ({ children }) => {

目前你的代码正在传递整个props对象，它看起来像{ children: ... }，并导致你的错误。