Question

我正在使用css模块，目前我的方法是为组件分配多个类：

import {class1,class2 } from './styles.css' <div><Link to = 'auth' className= {[`${class1} ${class2}`]} >Login</Link></div>

这似乎并不高效也不优雅。

Answer 1

您可以使用类名（如官方反应文档所述）

链接到github：https://github.com/JedWatson/classnames

const class = {class1:true,class2:onlyIfFalgisTrue};

然后您可以将其用作

<div><Link to = 'auth' className= {class} >Login</Link></div>

Answer 2

是的，有一个名为classnames的实用程序 https://github.com/JedWatson/classnames

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'

针对您的具体用途

const klassNames = classNames(`${class1} ${class2}`);
div><Link to = 'auth' className= {klassNames} >Login</Link></div>

我同意您可能会说这与您之前的代码相同，但是看看是否想根据某些条件添加类，这是非常有益的

另一个例子

const klassNames = classNames(`${class1}`, {
`${class2}`: someCondition === true,
`${class3}: someCondition === false
}

我在我的大型反应项目中使用真的解决了否则为类调节

实施例

有没有更好的方法将多个css classNames分配给React组件？

2 个答案: