在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 添加额外的节点。

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

Answer 3

1. 创建一个 css 文件并将其导入到您的 App.js 中
2. 使用Class.js 创建一个高阶组件，如下所示

    import React from  'react';
    
    const withClass = (WrappedComponent, className) => {
        return props => (
            <div className={className}>
                <WrappedComponent {...props} />
            </div>
        );
    };
    
    export default withClass;

3. 也导入你的临时文件。
4. 在你的 App.js 中编写如下内容

    <React.Fragment>
        <p>Some JSX code here</p>
    <React.Fragment>
    
    export default withClass(App, classes.App);

我在 css 文件中创建了 .App 类并将其导入，以便稍后可以将其与 .App 一起使用classes.App。这样您就可以应用您在 css 中创建的任何 css 类。您可以使用相同的wrapperComponent 来包装您拥有的每个组件，只需导入它并更改组件中的导出即可。您只需选择您选择的类名并在组件的导出语句中使用它即可。当你用扩展运算符（...）编写 props 时。组件中的所有属性都将传递给此wrapperComponent。