web-dev-qa-db-fra.com

Solution de contournement pour ajouter className à un fragment dans React

J'essaie de créer un composant sans état dans React dans le seul but d'agir comme un emballage réutilisable. J'utilise également des modules CSS, car je souhaite disposer de CSS entièrement modulaire.

Le problème est que je ne veux pas ajouter d’éléments inutiles (et plus encore de <div>s), mais plutôt utiliser les fragments de React.

Maintenant, le problème que j'ai est Fragment (au moins pour le moment) n'accepte pas classNames. Donc si j'essaye ceci:

// Dans Wrapper.js:

import React, { Fragment } from 'react'
import styles from './Wrapper.css'

const wrapper = (props) => (
    <Fragment className={styles.wrapper}>
        {props.children}
    </Fragment>
)

export default wrapper

Dans (par exemple) Navbar.js:

import React from 'react'
import styles from './Navbar.css'
import Wrapper from '../../Layout/Wrapper'

const navBar = (props) => (
    <nav className={styles.navBar}>
        <Wrapper>
            This is the site's main navigation bar.
        </Wrapper>
    </nav>
)

export default navBar

Maintenant, je peux bien sûr utiliser une div à la place du fragment, mais existe-t-il une autre solution de contournement pour éviter d'utiliser des balises inutiles, dont je suis totalement inconscient à cette heure de la nuit? :)

Merci d'avance pour toute idée, recommandation, correction ou autre forme d'aide!

javascriptreactjscss-modulesreact-css-modules
5
NTP

Les fragments vous permettent de grouper une liste d'enfants sans ajouter de nœuds supplémentaires au DOM. - https://reactjs.org/docs/fragments.html

What Fragments essaie de résoudre ses éléments inutiles mais cela ne signifie pas pour autant que Fragments remplacera div entièrement. Si vous devez ajouter un className à cet endroit, il est clair que vous ajoutez soit un élément dom, dans ce cas, un autre div, soit vous ajoutez la classe à son parent.

5
John Baker

Utiliser Fragment signifie ne pas ajouter de nœud supplémentaire à DOM.

Si vous souhaitez attribuer une className à un nœud, vous devrez utiliser div.

1
Amanshu Kataria

Donc, la seule chose que Wrapper/Fragment fait est d'agir comme un wrapper CSS sur les enfants de nav?

Je n'ai pas beaucoup d'expérience avec css-modules, mais si je voulais éviter un nœud DOM supplémentaire juste pour le className, j'utiliserais un procédé comme celui-ci pour appliquer les deux classNames à <nav>:

import React from 'react'
import navStyles from './Navbar.css'
import wrapperStyles from './Wrapper.css'

const navBar = (props) => (
    <nav className={`${navStyles.navBar} ${wrapperStyles.wrapper}`}>
       This is the site's main navigation bar.
    </nav>
)

export default navBar
0
pawel