如何在Storybook 7.0中渲染多组件对象？尝试后页面空白求解决

问题根源 #

• 导入不匹配：代码中导入CustomText但实际使用未导入的Text对象，导致变量未定义，页面无内容。
• Meta配置错误：meta的component字段指定了CustomText，但目标渲染的是Text下的组件集合，Storybook无法识别对象类型的component，引发渲染异常。

修正后的代码 #

import type { Meta, StoryObj } from '@storybook/react';
// 导入正确的Text组件集合
import { Text } from './Typography';

const meta: Meta = {
  title: 'Typography',
  // 若需要参数面板正常工作，可指定一个基准组件用于类型推断（可选）
  // component: Text.Heading1,
};

export default meta;

type Story = StoryObj;

export const AllHeadings: Story = {
  render: (args) => (
    <>
      {Object.entries(Text).map(([key, Component]) => (
        <Component key={key} {...args}>
          {key}
        </Component>
      ))}
    </>
  ),
};

额外优化建议 #

• 若需为不同组件设置差异化参数，可在遍历中单独处理：

{Object.entries(Text).map(([key, Component]) => (
  <Component 
    key={key} 
    {...args} 
    // 示例：为Heading1添加专属样式
    style={key === 'Heading1' ? { color: '#e53e3e' } : {}}
  >
    {key}
  </Component>
))}

• 确认Text对象内的Heading1~Heading5均为有效React组件，无内部报错导致渲染失败。

内容的提问来源于stack exchange，提问作者J T