javascript 在 React 中将 className 添加到 Fragment 的解决方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49069746/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Workaround to add className to Fragment in React
提问by NTP
I am trying to create a stateless component in React with the sole purpose of acting as a reusable wrapper. I am also using CSS Modules because I want to have fully modular CSS.
我试图在 React 中创建一个无状态组件，其唯一目的是充当可重用的包装器。我也在使用 CSS Modules，因为我想要完全模块化的 CSS。
The thing is I don't want to add unnecessary elements (and even more so <div>s), but instead I want to use React's Fragments.
问题是我不想添加不必要的元素（甚至更多<div>），而是我想使用 React 的 Fragments。
Now, the problem I have is Fragment (at least for now) do not accept classNames. So if I try this:
现在，我遇到的问题是 Fragment（至少现在）不接受 classNames。所以如果我试试这个：
// In Wrapper.js:
// 在 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
In (for example) Navbar.js:
在（例如）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
Now I can of course, use a div instead of the Fragment, but is there any other workaround to avoid using unnecessary markup, of which I am totally unaware at this hour of the night? :)
现在我当然可以使用 div 而不是 Fragment，但是有没有其他解决方法可以避免使用不必要的标记，而我在深夜的这个时候完全不知道这些标记？:)
Thanks in advance for any insight, recommendation, correction, or any other form of help!
在此先感谢您的任何见解、建议、更正或任何其他形式的帮助！
回答by John Baker
Fragments let you group a list of children without adding extra nodes to the DOM. - https://reactjs.org/docs/fragments.html
Fragments 允许您对子项列表进行分组，而无需向 DOM 添加额外的节点。- https://reactjs.org/docs/fragments.html
What Fragments tries to solve its the unnecessary dom elements but this doesn't mean that Fragments will replace diventirely. If you need to add a classNamethere, its clearl that either you add a dom element in this case another divor add the class to its parent.
什么 Fragments 试图解决其不必要的 dom 元素，但这并不意味着 Fragments 将div完全替换。如果您需要在className那里添加一个，很明显，要么在这种情况下div添加另一个 dom 元素，要么将类添加到其父元素。
回答by Amanshu Kataria
Using Fragmentmeans not adding an extra node to DOM.
使用Fragment意味着不向 DOM 添加额外的节点。
If you want to assign a classNameto a node then you'll have to use div.
如果要将 a 分配className给节点，则必须使用div.
回答by pawel
So the only thing the Wrapper/ Fragmentdoes is acting as a CSS wrapper over the children of nav?
所以Wrapper/Fragment所做的唯一一件事就是充当nav?
I am not very experienced with css-modules, but if I wanted to avoid an extra DOM node just for the className I'd use something like this to get both classNames applied to <nav>:
我对 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
回答by Atul Chavan
- Create a css file and import it inside your App.js
- Create a higher order component withClass.js like below
- 创建一个 css 文件并将其导入你的 App.js
- 使用 Class.js 创建一个高阶组件，如下所示
import React from 'react';
const withClass = (WrappedComponent, className) => {
return props => (
<div className={className}>
<WrappedComponent {...props} />
</div>
);
};
export default withClass;- Import your hoc too.
- In your App.js write something like below
- 也导入你的 hoc。
- 在你的 App.js 中写下类似下面的内容
<React.Fragment>
<p>Some JSX code here</p>
<React.Fragment>
export default withClass(App, classes.App);I created .App class inside my css file and imported it so that i can use it later with classes.App. This way you can apply any css class that you create inside your css.You can use the same wrapperComponent to wrap every component you have, by simply importing it and changing export in your component. You just have to make classname of your choice and use it in export statement of your component. When you write props with spread operator(...). All the props from your component will be passed to this wrapperComponent.
我在我的 css 文件中创建了 .App 类并导入了它，以便我以后可以将它与classes.App. 通过这种方式，您可以应用您在 css 中创建的任何 css 类。您可以使用相同的 wrapperComponent 来包装您拥有的每个组件，只需导入它并更改组件中的导出即可。您只需要选择类名并在组件的导出语句中使用它。当您使用扩展运算符（...）编写道具时。你的组件中的所有 props 都将传递给这个 wrapperComponent。
PS : English is not my native language so I am not good at explaining but this code will do the trick. Would appreciate a moderator taking look into my explanation.
PS：英语不是我的母语，所以我不擅长解释，但这段代码可以解决问题。非常感谢版主查看我的解释。
