在React中将className添加到Fragment的解决方法

Question

我试图在React中创建一个无状态组件，其唯一目的是充当可重用的包装器。我也在使用CSS模块，因为我想拥有完全模块化的CSS。

问题是我不想添加不必要的元素（甚至更多<div>s），但我想使用React的片段。

现在，我遇到的问题是Fragment（至少现在）不接受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

现在我可以使用div而不是Fragment，但是有没有其他的解决方法可以避免使用不必要的标记，我在这个时候完全没有意识到这一点？ :)

提前感谢任何见解，推荐，更正或任何其他形式的帮助！

Answer 1

片段允许您将子列表分组，而无需向DOM添加额外节点。 - https://reactjs.org/docs/fragments.html

Fragments试图解决其不必要的dom元素，但这并不意味着Fragments将完全取代div。如果你需要在那里添加一个className，那么你可以在这种情况下添加一个dom元素另一个div，或者将类添加到其父级。

Answer 2

使用Fragment意味着不向DOM添加额外的节点。

如果要将className分配给节点，则必须使用div。

Answer 3

那么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