0
171
VistasCómo obtener una vista previa del componente con el portal de reacción usando storybook.js
Implementé un componente Popper usando popper.js, y usé React's Portal para renderizar el elemento popper.
Y ahora quiero obtener una vista previa de mi componente popper, pero falla al crear un portal en storybook.js
Aquí está mi enfoque.
.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[AZ].*' }, 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;Captura de mensaje de error
¿Hay alguna forma de mostrar el componente usando el portal de reacción en el libro de cuentos? Si no, ¿hay otra forma de obtener una vista previa que no sea probarlo en el proyecto de reacción?
3 Respuestas
Responde la pregunta0
Pude solucionar esto agregando <div id="popper-root"></div> a mi plantilla ComponentStory.
Pero una cosa es que si renderizo la historia con el portal abierto, no puede encontrar popper-root .
0
Tengo una id de elemento raíz en el libro de cuentos para usar en el portal. Y lo he usado para el portal React/Next.js. Ahora está funcionando bien.
- Elemento raíz del libro de cuentos
<div id="docs-root"></div> - selector de elementos del portal
document.getElementById('docs-root)
0
Agrega preview-body.html , al lado de preview.js , con esto:
<div id="popper-root"></div>