javascript - 故事书不渲染组件

Question

这是我的组件:

Alert.tsx

import { Alert } from "react-bootstrap";

export enum AlertVariants {
  success = "success",
  danger = "danger",
}

export interface IAlertComponent {
  handleClose(): void;
  header: string;
  children: string;
  variant: AlertVariants;
}
export const AlertComponent = ({
  handleClose,
  header,
  children,
  variant,
}: IAlertComponent) => {
  return (
    <Alert variant={variant} onClose={handleClose} dismissible>
      <Alert.Heading>{header}</Alert.Heading>
      <p>{children}</p>
    </Alert>
  );
};

故事是这样的:

Alert.stories.tsx

import { Meta, Story } from "@storybook/react";
import {
  AlertComponent,
  IAlertComponent,
  AlertVariants,
} from "../components/Alert";

const Template: Story<IAlertComponent> = (args) => <AlertComponent {...args} />;

export default {
  title: "Alert",
  component: AlertComponent,
} as Meta;

export const Alert = () => Template.bind({});
Alert.args = {
  handleClose: () => console.log("close"),
  header: "header",
  children: "content",
  variant: AlertVariants.danger,
};

export const tmp = () => <div>test</div>; // this gets rendered

在我运行 yarn storybook 之后，我看到了这个:

我做错了什么？

编辑:

如果我在 Alert.stories.tsx 中执行此操作，它会呈现。所以它必须是 smth 与 args

export const tmp = () => (
  <AlertComponent
    handleClose={() => {}}
    header={"hedaer"}
    variant={AlertVariants.danger}
  >
    test
  </AlertComponent>
);

Answer 1

我一定是累了。我在做

export const Alert = () => Template.bind({});

代替

export const Alert = Template.bind({});