Блог

Я пытаюсь создать компонент Sidenav, как это:

 <Sidenav>
                        <SidenavSection title={'Develop'}>
                            <SidenavItem>Authentication</SidenavItem>
                            <SidenavItem>Test</SidenavItem>
                        </SidenavSection>
                    </Sidenav>
 

Поэтому я создал SidenavSection — группу предметов, и SidenavItem .

Раздел Sidenav выглядит так:

 function SidenavSection({ children, title }) {
    return (
        <>
            <li className="p-4 w-full flex relative shadow-sm">
                <div className="flex-auto my-1">
                    <span className="text-white font-medium">{title}</span>
                </div>
            </li>

            {children.map((child) => {
                    console.log('child', child);
                    return (
                        <div
                            className="text-blue-400 flex relative px-4 hover:bg-gray-700 cursor-pointer">
                            <div className="mr-4 my-auto">
                                <svg className="fill-current h-5 w-5" focusable="false" viewBox="0 0 24 24"
                                     aria-hidden="true">
                                    <path
                                        d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/>
                                </svg>
                            </div>
                            <div className="flex-auto my-1">
                                <span>Test</span>
                            </div>
                        </div>)
                }
            )}
        </>)
}
 

СиденавИтем:

 function SidenavItem({ children }) {
    return (
        {children}
    )
}
 

Когда я обновляю свой SidenavSection от test до:

 <div className="flex-auto my-1">
                                <span>{child}</span>
                            </div>
 

Я получаю следующую ошибку:

 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.
 

Не уверен, что я сделал неправильно — моя цель-сделать ребенка (SidenavItem). Есть идеи?

Вам нужно вернуть элементы JSX SidenavItem вместо объекта с ключом children , как вы делаете в настоящее время. Если вы используете v16 или выше react, вы можете просто написать это так

 function SidenavItem({ children }) {
    return children;
}