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

Question

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

问题是我不想添加不必要的元素（甚至 <div>s），而是我想使用 React 的 Fragments。

现在，我遇到的问题是片段（至少现在）不接受类名。所以如果我试试这个：

// 在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 而不是片段，但是是否有任何其他解决方法来避免使用不必要的标记，我在晚上的这个时候完全没有意识到？ :)

在此先感谢您的任何见解、建议、更正或任何其他形式的帮助！

Answer 1

Fragments let you group a list of children without adding extra nodes to the DOM. - https://reactjs.org/docs/fragments.html

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

Answer 2

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

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

Answer 3

所以 Wrapper / Fragment 所做的唯一一件事就是充当 CSS 对 nav 的 children 的包装？

我对 css-modules 不是很有经验，但是如果我想避免只为 className 使用额外的 DOM 节点，我会使用类似这样的方法将两个 className 应用于 <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

Answer 4

创建一个 css 文件并将其导入您的 App.js
创建一个高阶组件 withClass.js 如下所示

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

也导入你的 hoc。
在你的App.js中写下如下内容

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

我在我的 css 文件中创建了 .App class 并将其导入，以便我以后可以在 classes.App 中使用它。通过这种方式，您可以应用您在 css.You 中创建的任何 css class 可以使用相同的 wrapperComponent 来包装您拥有的每个组件，只需导入它并更改组件中的导出即可。您只需选择 classname 并在组件的导出语句中使用它。当你用传播运算符（...）编写道具时。您组件中的所有道具都将传递给此 wrapperComponent。

PS：英语不是我的母语，所以我不擅长解释，但这段代码可以解决问题。希望版主能仔细阅读我的解释。

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

Workaround to add className to Fragment in React

javascript

reactjs

css-modules

react-css-modules