web-dev-qa-db-fra.com

Comment ajouter un nom de classe/id au composant React-Bootstrap?

Supposons que nous utilisions Row from React-Bootstrap ... Comment pouvons-nous le styler sans utiliser un wrapper ou un élément interne: 

<Row>
  <div className='some-style'>
   ...
</Row>

Idéalement, nous pourrions simplement faire:

<Row className='some-style> 
  ...
</Row>

Mais cela ne fonctionne pas et je suppose que c'est parce que React-Bootstrap ne sait pas où le className se situe dans le composant Row (il faut juste styler la div qui a les styles de la rangée je pense)

reactjsjsxreact-bootstrap
8
Arman

Si vous examinez le composant code du composant, vous constaterez qu’il utilise le prop className qui lui est transmis pour le combiner à la classe row afin d’obtenir le jeu de classes résultant (<Row className="aaa bbb"... works) .Aussi, si vous fournissez le id prop comme <Row id="444" ... il va effectivement définir l'attribut id pour l'élément.

12
Igorsvee

La 1ère voie consiste à utiliser des accessoires

<Row id = "someRandomID">

Où, dans la définition, vous pouvez simplement aller 

const Row = props  => {
 div id = {props.id}
}

La même chose pourrait être faite avec class, en remplaçant id par className dans l'exemple ci-dessus.

Vous pouvez aussi bien utiliser react-html-id, c’est un paquet npm ..__, un paquet npm qui vous permet d’utiliser des identifiants HTML uniques pour les composants sans aucune dépendance d’autres bibliothèques.

Réf: react-html-id

Paix.

0
Mayank Gangwal