React child 不能是一个对象 - Storybook
P粉184747536
P粉184747536 2024-03-29 08:43:17
[React讨论组]

我正在为我的设计系统创建故事书,但遇到以下错误:

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: ,
        label: 'Item 1',
        children: 
Item 1 content
}, { icon: , label: 'Item 2', children:
Item 2 content
}, { icon: , label: 'Item 3', children:
Item 3 content
}, ]; 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[];
}

如果您将组件导入另一个文件中,它可以完美地处理相同的数据,例如:

但在 Storybook 中它不起作用,显示上述错误。

我已将示例放在此链接中:

https://codesandbox.io/s/naughty-monad-ql4h2e?file=/src/App.tsx

P粉184747536
P粉184747536

全部回复(1)
P粉904450959

我设法解决了这个问题。由于某种未知的原因,我无法在界面中使用“孩子”一词

当我从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[];
}
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号