Javascript 将样式化组件作为子组件传递给另一个组件会引发错误

我正在尝试创建一个通用布局组件，可以将其他组件传递给它。但是，当我传入其他样式化组件时，我收到错误，“错误：对象作为React子级无效（找到：具有键{$$typeof、render、attrs、componentStyle、displayName、FolderComponentDS、styledComponentId、target、withComponent、WarntooManyClass、toString}的对象）。如果要呈现子对象集合，请改用数组。“

这是我的布局组件

const LayoutOne = props => {
    const {
        backgroundColors,
        navbar: navbarChildren,
        sideNavLeft,
        sideNavRight,
        subGridChildren
    } = props;
    return (
        <Grid bg={backgroundColors}>
            <Navbar bg={backgroundColors}>{navbarChildren}</Navbar>
            <SideNav bg={backgroundColors}>{sideNavLeft}</SideNav>
            <Subgrid bg={backgroundColors}>
                {subGridChildren.map(child => (
                    <SubgridRow bg={backgroundColors}>{child}</SubgridRow>
                ))}
            </Subgrid>
            <SideNav bg={backgroundColors}>{sideNavRight}</SideNav>
        </Grid>
    );
};

以及其他具有样式的组件

const Name = styled.h1`
    color: #ffffff;
    font-family: "Monoton", cursive;
    z-index: 2;
    font-size: calc(1em + 6vw);
`;

当使用渲染时，组件将其替换为调用。React知道如何渲染元素、字符串、数字，但不知道如何渲染对象

在您的例子中：

constnavbar=styled.div`

，

Navbar

是一个函数，它依次是一个对象。因此，您不会发送它知道如何渲染的内容来进行响应。如果要使其工作，必须向其发送一个元素：

const Navbar = styled.div``;

const Name = styled.h1`
    color: #ffffff;
    font-family: "Monoton", cursive;
    z-index: 2;
    font-size: calc(1em + 6vw);
`;