我正在为我的设计系统创建故事书，但遇到以下错误：
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[];
}
如果您将组件导入另一个文件中，它可以完美地处理相同的数据，例如：
<Tabs defaultValue={'tab-0'} children={items} />
但在 Storybook 中它不起作用，显示上述错误。
我已将示例放在此链接中：
https://codesandbox.io/s/naughty-monad-ql4h2e?file=/src/App.tsx
我设法解决了这个问题。由于某种未知的原因，我无法在界面中使用“孩子”一词
当我从children更改为items时，问题就解决了
之前：
import { ReactNode } from "react"; interface Tab { label?: string; icon?: ReactNode, content: ReactNode } export interface TabsProps { type?: "default" | "secondary"; defaultValue?: string; children: Tab[]; }之后
import { ReactNode } from "react"; interface Tab { label?: string; icon?: ReactNode, content: ReactNode } export interface TabsProps { type?: "default" | "secondary"; defaultValue?: string; items: Tab[]; }