Maison > Questions et réponses > le corps du texte
Je crée un livre d'histoires pour mon système de conception et j'obtiens l'erreur suivante :
Error: Objects are not valid as a React child (found: object with keys {icon, label, content}). If you meant to render a collection of children, use an array instead. at mapIntoArray (/node_modules/.cache/.vite-storybook/deps/chunk-LWCIAKPC.js?v=909d2fcb:701:31)) at mapChildren (/node_modules/.cache/.vite-storybook/deps/chunk-LWCIAKPC.js?v=909d2fcb:736:11)) at Object.toArray (/node_modules/.cache/.vite-storybook/deps/chunk-LWCIAKPC.js?v=909d2fcb:754:18)) at parseReactElement2 (/node_modules/.cache/.vite-storybook/deps/@storybook_react_preview.js?v=909d2fcb:512:49)) at reactElementToJsxString2 (/node_modules/.cache/.vite-storybook/deps/@storybook_react_preview.js?v=909d2fcb:848:21)) at /node_modules/.cache/.vite-storybook/deps/@storybook_react_preview.js?v=909d2fcb:1437:173 at /node_modules/.cache/.vite-storybook/deps/chunk-LWCIAKPC.js?v=909d2fcb:737:25 at mapIntoArray (/node_modules/.cache/.vite-storybook/deps/chunk-LWCIAKPC.js?v=909d2fcb:660:31)) at Object.mapChildren [as map] (/node_modules/.cache/.vite-storybook/deps/chunk-LWCIAKPC.js?v=909d2fcb:736:11))
Tabs.stories.tsx
import { Tabs } from './index'; import { Meta, StoryObj } from "@storybook/react" import { Gear, PaintBrush, PencilSimple } from "phosphor-react"; const items = [ { icon: <PencilSimple size={20} />, label: 'Item 1', children: <div>Item 1 content</div> }, { icon: <Gear size={20} />, label: 'Item 2', children: <div>Item 2 content</div> }, { icon: <PaintBrush size={20} />, label: 'Item 3', children: <div>Item 3 content</div> }, ]; export default { title: 'Components/Tabs', component: Tabs, args: { children: items, type: "default" }, } as Meta export const Default:StoryObj = { }
TabsProps.types.ts
import { ReactNode } from "react"; interface Tab { label?: string; icon?: ReactNode, content: ReactNode } export interface TabsProps { type?: "default" | "secondary"; defaultValue?: string; children: Tab[]; }
Cela fonctionne parfaitement avec les mêmes données si vous importez le composant dans un autre fichier, par exemple :
<Tabs defaultValue={'tab-0'} children={items} />
Mais dans Storybook, cela ne fonctionne pas, affichant l'erreur ci-dessus.
J'ai mis l'exemple sur ce lien :
https://codesandbox.io/s/naughty-monad-ql4h2e?file=/src/App.tsx
P粉9044509592024-03-30 00:02:17
J'ai réussi à résoudre ce problème. Pour une raison inconnue, je ne peux pas utiliser le mot "Enfant" dans l'interface
Le problème a été résolu lorsque j'ai changé de enfants à articles
Avant :
import { ReactNode } from "react"; interface Tab { label?: string; icon?: ReactNode, content: ReactNode } export interface TabsProps { type?: "default" | "secondary"; defaultValue?: string; children: Tab[]; }
Après
import { ReactNode } from "react"; interface Tab { label?: string; icon?: ReactNode, content: ReactNode } export interface TabsProps { type?: "default" | "secondary"; defaultValue?: string; items: Tab[]; }