如何使用 storybook.js 通过 React 门户预览组件

Question

我使用 popper.js 实现了一个 Popper 组件，我使用 React 的 Portal 来渲染 popper 元素。

现在我想预览我的 popper 组件，但它无法在 storybook.js

上创建门户

这是我的方法。

.storybook/preview.js

import { ThemeProvider } from 'emotion-theming';
import { Global } from '@emotion/react';
import { theme, normalize } from 'custom-theme';

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

export const decorators = [
  Story => (
    <>
      <ThemeProvider theme={theme}>
        <Global styles={normalize} />
        {Story()}
        <div id="popper-root"></div>
      </ThemeProvider>
    </>
  ),
];

Portal.tsx

import { ReactNode, useMemo } from 'react';
import { createPortal } from 'react-dom';

interface IPortal {
  children: ReactNode;
  portalId: string;
}

const Portal = ({ children, portalId }: IPortal) => {
  const portalElement = useMemo<HTMLElement | null>(
    () => document.getElementById(portalId),
    [portalId],
  );

  if (!portalElement) {
    throw new Error(`Undefined Portal Id : ${portalId}`);
  }

  return createPortal(children, portalElement);
};

export default Portal;

捕获错误信息

有什么方法可以在 Storybook 上使用 React Portal 显示组件吗？如果没有，除了在 React 项目上测试之外，还有其他方法可以预览吗？

Answer 1

在 preview.js 旁边添加 preview-body.html，其中：

<div id="popper-root"></div>

Answer 2

我可以通过添加来解决这个问题 <div id="popper-root"></div> 到我的 ComponentStory 模板。

但是有一件事是如果我在门户打开的情况下渲染故事，它找不到 popper-root。

如何使用 storybook.js 通过 React 门户预览组件

How to preview component with react portal using storybook.js

javascript

reactjs

storybook

react-portal