Передача стилизованного компонента в качестве дочернего компонента другому компоненту выдает ошибку

Question

Я пытаюсь создать универсальный компонент макета c, в который могут быть переданы другие компоненты. Однако, когда я передаю другие стилизованные компоненты, я получаю сообщение об ошибке: «Ошибка: объекты недопустимы как дочерний элемент React (найдено: объект с ключами {$$ typeof, render, attrs, componentStyle, displayName, foldedComponentIds, styledComponentId, target» , withComponent, warnTooManyClasses, 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>
    );
};

Вот как я создание экземпляра:

<LayoutOne
    navbar={Navbar}
    subGridChildren={[Name, SocialIconContainer, Slider]}
    sideNavLeft={PreviousBackground}
    sideNavRight={NextBackground}
/>

Я попытался передать стильный div без стилей:

const Navbar = styled.div``;

А также другие компоненты со стилями.

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

Answer 1

Когда вы используете jsx для рендеринга, а компонент Babel заменяет его вызовом createElement . React знает, как отображать элементы, строки, числа, но не умеет отображать объекты.

В вашем случае: const Navbar = styled.div``;, Navbar - это функция, которая, в свою очередь, является объектом. Таким образом, вы не отправляете в React что-то, что он умеет отображать. Если вы хотите, чтобы он работал, вы должны отправить ему элемент:

<LayoutOne
    navbar={<Navbar >}
    ...
/>