小编NTP*_*NTP的帖子

我试图在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,但是有没有其他的解决方法可以避免使用不必要的标记,我在这个时候完全没有意识到这一点？:)

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