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

Answer 4

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

    <to uri="activemq:queuename?jmsMessageType=Text&amp;exchangePattern=InOnly"/>

也导入您的专案。
在您的App.js中，如下所示

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

我在CSS文件中创建了.App类，并将其导入，以便以后可以在<React.Fragment> <p>Some JSX code here</p> <React.Fragment> export default withClass(App, classes.App);中使用它。这样，您可以应用在css内部创建的任何css类。您可以使用相同的wrapperComponent封装您拥有的每个组件，只需简单地将其导入并更改组件中的导出即可。您只需要选择所需的类名，然后在组件的export语句中使用它即可。当您使用传播算子（...）编写道具时。来自组件的所有道具都将传递到该wrapperComponent。

PS：英语不是我的母语，所以我不擅长解释，但是这段代码可以解决问题。希望主持人仔细考虑我的解释。

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

4 个答案: