javascript - Cum să creezi proprietăți prescurtate asemănătoare cu Bootstrap pentru componentele React?

Care este cea mai bună metodă de a realiza acest comportament împreună cu React + TypeScript?

import { Button, Card } from 'src/components';

const Page = () => (
  <div>
    <Card mx3 p3 flex justifyContentEnd>
      /* Card content */
    </Card>
    <Button my2 mx3>
      Login
    </Button>
  </div>
);

De exemplu, mx3 va adăuga o margine de 16px pe orizontală, my2 va adăuga o margine de 8px pe verticală etc., similar cu modul în care framework-ul Bootstrap folosește clase pentru a aplica stiluri de utilitate ușor.

Am analizat câteva biblioteci de componente cu acest tip de comportament pentru a găsi o soluție potrivită; totuși, constat că majoritatea nu au suport puternic pentru tipizare. Exemple sunt RNUILib, NativeBase, Magnus UI, etc.

Răspuns #1

Poți declara proprietățile tale astfel:

const styles = ['mx3', 'p3', 'flex'] as const

type Styles = Record<typeof styles[number], boolean>;

Apoi folosește-le astfel:

type CardProps = Styles & {
  other: 'props here'
}

Acum, asta ar trebui să funcționeze:

<Card mx3 p3 flex />

Poți obține prop-uri aplicate astfel:

const values = Object.entries(props).map(([key, value]) => value ? key : null).filter(Boolean)

Răspunsul #2

Dacă te uiți la codul sursă al react-bootstrap, au mapat valoarea booleană la o anumită clasă CSS folosind o funcție utilitară din pachetul classnames. Poți face același lucru:

...
...
        <Component
          {...buttonProps}
          {...props}
          ref={ref}
          className={classNames(
            className,
            prefix,
            active && 'active',
            variant && `${prefix}-${variant}`,
            size && `${prefix}-${size}`,
            props.href && props.disabled && 'disabled',
          )}
        />
...
...