React.ReactNode 作为故事书中的参数

Question

这是我的按钮组件类型

import React from 'react'
export type ButtonProps = {
  label: string;
  color?:'primary' | 'secondary' | 'tertiary';
  size?:'mobile' | 'tablet' | 'desktop',
  handleClick?:()=>void,
  fullWidth?:boolean,
  loading?:boolean
  href?:string,
  icon?:React.ReactNode
  target?:'_blank' | '_parent'
  disabled?:boolean
}

我在故事书中使用按钮组件。

故事书代码

import React from 'react';
import { Meta, StoryObj } from "@storybook/react";
import { Button as SampleButton } from "../../components";
import 'antd/dist/reset.css';

const buttonMeta: Meta<typeof SampleButton> = {
  title: "Components/Button",
  tags: ['autodocs'],
  component: SampleButton,
};

export default buttonMeta;

type Story = StoryObj<typeof buttonMeta>;

export const Primary: Story = {
  args: {
    label: "Testing",
    icon: React.createElement('h1', null, 'Icon')
  },
};

现在我正在使用 React.createElement 在 args 中为图标添加 React 元素，但是如果我使用任何 html 的简单标签，则会出现找不到名称 {tag} 的错误。

有什么方法可以将 html 标签或 React 组件/元素添加到故事书的参数中。 在我的下一个组件中，会有一种情况，我必须在 args 中添加 form 作为子项，根据这种方式（React.createElement），这将非常困难。

有什么解决方案或方法可以解决这个问题吗？

供参考

故事书Main.ts

import type { StorybookConfig } from "@storybook/react-webpack5";
const config: StorybookConfig = {
  // ["../src/stories/**/*.stories.@(js|jsx|ts|tsx)"]
  stories: ["../src/stories/**/*.mdx", "../src/stories/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app",
    "@storybook/addon-interactions",
    '@storybook/addon-docs'
  ],
  framework: {
    name: "@storybook/react-webpack5",
    options: {
      
    },
  },
  docs: {
    autodocs: "tag",
  },
  staticDirs: ["..\\public"],
};
export default config;

错误

Answer 1

您可以将文件名从

Button.stories.ts

更改为

Button.stories.tsx