描述bug
我有一个ModalButton组件(在React中)。我的组件在我的应用中运行良好,但在我的故事中,当我点击按钮时,它不显示模态框。
重现问题
这里是我的组件的代码:
"use client";
import React, {
cloneElement,
ComponentProps,
FunctionComponent,
ReactElement,
ReactNode,
} from "react";
import useModal from "../../../hooks/useModal";
import Modal from "../Modal/Modal";
type ModalButtonProps = {
trigger: ReactElement;
modalProps?: Pick<
ComponentProps<typeof Modal>,
"className" | "header" | "leading" | "size" | "trailing" | "title"
>;
modalContent: ReactNode;
};
const ModalButton: FunctionComponent<ModalButtonProps> = ({
trigger,
modalProps,
modalContent,
}) => {
const modalState = useModal();
return (
<>
{cloneElement(trigger, {
onClick: (event: any) => {
event?.preventDefault();
modalState.open();
},
})}
<Modal
open={modalState.isOpen}
onClose={modalState.close}
{...modalProps}
>
{modalContent}
</Modal>
</>
);
};
export default ModalButton;
故事的代码:
import { Meta, StoryObj } from "@storybook/react";
import Button from "../../components/elements/Button";
import ModalButton from "../../components/modules/ModalButton";
export default {
title: "modules/ModalButton",
component: ModalButton,
args: {
modalContent: <p>Modal content</p>,
},
argTypes: {
trigger: { table: { disable: true } },
modalContent: { table: { disable: true } },
modalProps: { table: { disable: true } },
},
} as Meta<typeof ModalButton>;
type Story = StoryObj<typeof ModalButton>;
export const ButtonTrigger: Story = {
args: {
trigger: <Button>Lorem ipsum</Button>,
},
};
export const AnchorTrigger: Story = {
args: {
trigger: <Button as="a">Lorem ipsum</Button>,
},
};
系统信息
Environment Info:
System:
OS: Linux 5.4 Ubuntu 20.04.6 LTS (Focal Fossa)
CPU: (16) x64 AMD Ryzen 7 2700 Eight-Core Processor
Binaries:
Node: 16.14.2 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 8.5.0 - /usr/local/bin/npm
Browsers:
Chrome: 116.0.5845.187
npmPackages:
@storybook/addon-actions: ^7.3.1 => 7.3.2
@storybook/addon-essentials: ^7.3.1 => 7.3.2
@storybook/addon-interactions: ^7.3.1 => 7.3.2
@storybook/addon-links: ^7.3.1 => 7.3.2
@storybook/addon-mdx-gfm: ^7.3.1 => 7.3.2
@storybook/nextjs: ^7.3.1 => 7.3.2
@storybook/react: ^7.3.1 => 7.3.2
@storybook/testing-library: 0.2.0 => 0.2.0
其他相关信息
- 无响应*
8条答案
按热度按时间arknldoa1#
我可以帮忙解决这个问题,因为我非常熟悉这个问题。
请在2023年的Hacktoberfest上将它分配给我。
eqqqjvef2#
我也遇到了这个问题,什么时候解决?
egdjgwm83#
你好@LamsaLL
我的猜测是模态框显示了,但由于故事iframe没有泄露任何内容,所以你需要增加可见区域来显示它。我认为这个问题与以下讨论和问题有关。
有一个功能请求,要求实现对缩放功能的细粒度控制:
fixed
positioning #23699请查看DOM,看看模态框是否真的显示了。
6uxekuva4#
@LamsaLL 我想贡献。但是上述的bug很难追踪。能否更具体地描述这个bug,并在故事书中展示代码,以便实际渲染在哪里?
brvekthn5#
你好,LamsaLL@Rainnut
请提供更多关于此问题的头脑 Storm 或受影响的代码仓库。根据上述评论,信息不足以深入了解。
@shilman ,请确认,这是否真的是来自storybook代码配置的bug。我想这不是典型的bug,因为我在我的react代码中启动的一些storybook配置是正常工作的
dddzy1tm6#
你好@LamsaLL
我的猜测是模态框显示了,但由于故事iframe没有泄露任何内容,所以你必须增加可见区域来显示它。我认为这个问题与以下讨论和问题有关。
有一个功能请求,要求实现对缩放功能的细粒度控制:
fixed
positioning #23699请查看DOM,模态框是否实际显示。
@valentinpalkovic ,你能稍微详细说明一下,这些其他问题是如何与这个模态框问题的吗?
ijnw1ujt7#
你好,LamsaLL。
根据你提供的代码,我已经尝试重现并修复了这个问题。这是我的代码仓库,你可以查看它并获得一些想法。
toe950278#
@LamsaLL
提供的解决方案由@harsh1898提供,对我来说运行良好。请在仓库中检查代码。