web-dev-qa-db-ja.com

ReactでclassNameをフラグメントに追加する回避策

Reactで再利用可能なラッパーとして機能することのみを目的としてステートレスコンポーネントを作成しようとしています。完全にモジュール化されたCSSが必要なため、CSSモジュールも使用しています。

問題は、不要な要素を追加したくないということです（さらに、<div>s）が、代わりにReactのフラグメントを使用したい。

今、私が抱えている問題は、フラグメント（少なくとも今のところ）classNamesを受け入れないことです。だから私がこれを試してみると：

// 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

（たとえば）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

もちろん、Fragmentの代わりにdivを使用することもできますが、不必要なマークアップを使用しないようにする他の回避策はありますか？ :)

洞察、推奨、修正、またはその他の形式のヘルプを事前に感謝します！

javascriptreactjscss-modulesreact-css-modules
10
NTP

フラグメントを使用すると、DOMに余分なノードを追加することなく、子のリストをグループ化できます。 - https://reactjs.org/docs/fragments.html

Fragmentsが不必要なdom要素を解決しようとするものですが、これはFragmentsがdivを完全に置き換えることを意味しません。そこにclassNameを追加する必要がある場合、この場合は別のdivのdom要素を追加するか、クラスをその親に追加することを明確にします。

16
John Baker

Fragmentを使用すると、余分なノードをDOMに追加しません。

classNameをノードに割り当てる場合は、divを使用する必要があります。

1
Amanshu Kataria

Wrapper/Fragmentが行う唯一のことは、navの子に対するCSSラッパーとして機能することです。

私はcss-modulesをあまり経験していませんが、classNameのためだけに余分なDOMノードを避けたい場合は、次のようなものを使用して両方の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