Quel est le cas d'utilisation de la fonction de composants styled-composants ()?

Question

Je suis tombé sur le .attrs() fonction des composants de style , mais je ne comprends pas ce qu'il fait, ou ce qu'il fait différemment ?

J'ai essayé de comprendre l'exemple de leur docs, mais aussi loin que moi, je peux faire exactement la même chose sans la fonction attrs().

Quelqu'un pourrait-il s'il vous plaît expliquer cela ou donner un exemple simple?

Answer 1

Du Documentation :

Quand utiliser les attractions?

Vous pouvez transmettre des attributs aux composants de style à l'aide des attractions, mais il n'est pas toujours raisonnable de le faire.

La règle de base consiste à utiliser des attractions lorsque vous souhaitez que chaque instance d'un composant stylé puisse avoir ce support et passez des accessoires directement lorsque chaque instance a besoin d'une autre:

const PasswordInput = styled.input.attrs(props => ({
  // Every <PasswordInput /> should be type="password"
  type: "password"
}))``

// This specific one is hidden, so let's set aria-hidden
<PasswordInput aria-hidden="true" />
const PasswordInput = styled.input.attrs(props => ({
  // Every <PasswordInput /> should be type="password"
  type: "password"
}))``
// This specific one is hidden, so let's set aria-hidden
<PasswordInput aria-hidden="true" />

Il en va de même pour les accessoires pouvant être déduits en fonction du "mode" d'un autre accessoire. Dans ce cas, vous pouvez définir une propriété sur ATTROS sur une fonction qui calcule celle-ci basée sur d'autres accessoires.