1
votes

Comment appliquer des accessoires d'interface utilisateur dans React

J'utilise une bibliothèque d'interface utilisateur externe et cette bibliothèque a un composant Button. Je veux créer un composant NewButton qui prendra tous les accessoires du composant Button de la bibliothèque et acceptera quelques accessoires supplémentaires que j'ajouterai par-dessus (comme 'url' et 'text' comme indiqué ci-dessous).

J'ai essayé quelque chose comme ça, je ne sais pas où placer le véritable "... libraryButtonProps":

import * as React from "react";
import { Button } from "library/buttons";

interface NewButtonProps {
  text: string;
  url: string;
}

export const NewButton = ({ text, url, ...libraryButtonProps }: NewButtonProps) => (
  <div>
    <a href={url}>
      <Button>
        {text}
      </Button>
    </a>
  </div>
);

Par exemple, je n'ai pas besoin de coder disabled = {disabled} dans ce bouton, car il est déjà intégré à cette bibliothèque.

reactjs typescript

0 commentaires

3 Réponses :

2
votes

Vous devez placer les accessoires sur le composant Button que vous avez importé à l'origine, sinon le composant ne connaîtrait pas les accessoires transférés.

import * as React from "react";
import { Button } from "library/buttons";

interface NewButtonProps {
  text: string;
  url: string;
  // Add the props of the original Button as valid 
}

export const NewButton = ({ text, url, ...libraryButtonProps }: NewButtonProps) => (
  <div>
    <a href={url}>
      <Button {...libraryButtonProps}>
        {text}
      </Button>
    </a>
  </div>
);

0 commentaires

2
votes

Cette bibliothèque devrait exposer ButtonProps .

Sinon, vous pouvez essayer l'assistant React.ComponentProps pour extraire les accessoires du composant exporté.

Solution:

import * as React from "react";
import { Button } from "library/buttons";

type LibButtonProps = React.ComponentProps<typeof Button>
interface NewButtonProps extends LibButtonProps {
  text: string;
  url: string;
}

export const NewButton: React.FC<NewButtonProps> = ({ text, url, ...libraryButtonProps }) => (
  <div>
    <a href={url}>
      <Button {...libraryButtonProps}>
        {text}
      </Button>
    </a>
  </div>
);

0 commentaires

2
votes

Ajoutez vos propres accessoires dans les accessoires existants du composant de bibliothèque à l'aide du mot extends clé extend.

import * as React from "react";
import { Button, ButtonProps } from "library/buttons";

interface NewButtonProps extends ButtonProps {
  text: string;
  url: string;
}

export const NewButton:React.FC<NewButtonProps> = ({ text, url, ...libraryButtonProps }) => (
  <div>
    <a href={url}>
      <Button {...libraryButtonProps} >
        {text}
      </Button>
    </a>
  </div>
);

0 commentaires