javascript - Kuinka kirjoittaa storybook lapselle, jonka tilan hallitsee vanhempi
Kirjoitan Storybookia lapsielementille, jossa vanhempi hallinnoi tilaa. Esimerkiksi value (merkkijono) ja onChange (funktio) välitetään propsien kautta. Minulla on molemmat propsit välitettynä, mutta en ole varma, miten päivittää tila storybook-tiedostossa.
tekstikenttä.tsx
import React, { FC, HTMLProps } from 'react'; type FirstNameTextFieldProps = HTMLProps<HTMLInputElement> const FirstNameTextField: FC<FirstNameTextFieldProps> = ( Lue lisää →reactjs - Storybook: Kuinka merkata geneeriset args/props-tyypit
Konteksti & Koodi
Laajensimme painikettamme näin:
export type ButtonProps<P = Record<string, unknown>> = P & { children: ReactNode | string onClick?: () => void className?: string disabled?: boolean secondary?: boolean } const Button = <P exte Lue lisää →reactjs - Storybookin TypeScriptillä kirjoitetut tarinatiedostot eivät ole käsitelty kunnolla
Siirsin äskettäin CRA-projektini Next.js:ään. Käytin tuossa projektissa Storybookia, joten jouduin muokkaamaan monia asetuksia, mutta TypeScriptiin liittyviä ongelmia on vielä jäljellä.
Tämä on esimerkki tarinatiedostostani.
import { ComponentStory, ComponentMeta } from '@storybook/react'; import Index from 'pages/profile'; export default { title: 'Views/Profile', component: Index, } as ComponentMeta<typeof Index>; export const IndexTemplate: ComponentStory< Lue lisää →typescript - Yarn-työtilat + Storybook-kääntymisvirhe
Työskentelen Yarn-työtilan kanssa, jolla on seuraava rakenne:
"workspaces": [ "app/*", "packages/*", "utilities/*" ],Kirjoitan joitakin apufunktioita Typescriptissä ja sitten tuon sen yhteen tiedostoon app/test/index.tsx
import Re Lue lisää →reactjs - kutsu React Hooksia globaalissa dekorointifunktiossa Storybookille
Haluan kutsua mukautettua React-hookia kaikille tarinoille, mutta en ole varma, missä sen pitäisi määritellä. Mukautetut hookit, joita haluan kutsua, on oltava kontekstin tarjoajassa.
Onko olemassa tapoja määritellä kontekstin tarjoaja ja mukautetut hookit kaikille tarinoille?
import React fr Lue lisää →javascript - Storybook inlineStories toimii mutta rikkoo propsien vuorovaikutukset
Minulla on ponnahdusikkuna media-galleriokomponentti ja minun täytyy käyttää sitä suoraan, dokumentoidakseni sen Storybookissa. Kun lisään alla olevan koodin tiedostoon '.storybook/preview.js'
export const parameters = { docs: { inlineStories: false, } }Se toimii odotetusti, mutta kun asetän inlineStories: false, Canvasilla ominaisuuksien muokkaamisessa ei ole ongelmaa, mutta Docsissa muokkaus ei vaikuta.
Välttääkseni tämän virheen yritin lisätä i
Lue lisää →reactjs - Storybook Typescript ei lataa juuri lisättyä props-tyyppiä, tarvitsee Storybookin uudelleenkäynnistyksen
module.exports = { stories: ["../**/*.stories.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"], addons: [ "@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions", "@storybook/preset-create-react-app", "@storybook/addon-a11y" ], typescript: { reactDocgen: "react-docgen-typescript", reactDocgenTypescriptOptions: { shouldExtractLitera
Lue lisää →typescript - Tyyppien käyttäminen Storybookin ja Sveltekitin kanssa
Yritän käyttää storybookia yhdessä typescriptin ja sveltekitin kanssa, vaikka tästä on aiheutunut joitakin ongelmia, joista en tunnu pääseväni itse eroon.
import Modal from './Modal.svelte' export default { title: 'Modal', component: Modal, } const Template = (args: any) => ({ component: Modal, props: args, }) export const Primary = Template.bind({}) Primary.args = { text: 'Hello World', }Yllä oleva koodi antaa minulle seuraavan virheen rivillä
Lue lisää →reactjs - storybook + jest play -metodi epäonnistuu, kun kutsutaan shouldHaveBeenCalled funktiolle
Minulla on tämä komponentti:
import { FC, ReactElement, useState, MouseEvent as ReactMouseEvent, ChangeEvent as ReactChangeEvent, } from 'react'; import { Stack, TablePagination } from '@mui/material'; export const Pagination: FC<IPaginationProps> = ({ total, page = 1, rowsPerPage = 25, position = 'start', rowsPerPageOptions = [10, 25, 50, 100], onPageChange, onRowsPerPageChange, }): ReactElement => { const [localPage, setPage] = useState(pag Lue lisää →reactjs - "Moduulia ei löytynyt" tai "Tuontipolku ei voi päättyä tsx" käyttäessä Storybookia TypeScriptin kanssa
Kirjoitan komponenttia, joka hyödyntää toista komponenttia, joten olen kirjoittanut
tiedostossa /src/stories/TextArea/TextArea.tsx.
Kuitenkin tämä antaa virheen
Lue lisää →