react classnames if else

Question

我将我的文件Order.css改为Order.module.css。现在我需要把这个条件从

const firstNameClass = firstNameInputHasError ? 'form-control invalid' : 'form-control';
...
<div className={firstNameClass}>
...
</div>

在这样的地方

const firstNameClass = firstNameInputHasError ? classes['form-control'] + classes['invalid'] : classes['form-control'];

当文件名为Order.css时，第一行可以正常工作。第二行不行

---

更新。感谢chenc推荐的classnames包

---

我的解决方案

import classes from './Order.module.css';
import classNames from "classnames/bind";
let classNameBound = classNames.bind(classes);
const firstNameClass = classNameBound(
classes["form-control"],
{invalid: firstNameInputHasError}
);

第二个不带类名的解决方案package

const firstNameClass = `${classes["form-control"]} ${firstNameInputHasError ?  classes.invalid : ''}`;

Answer 1

为什么不用类名呢?这是判断使用类

的条件的一个很好的包。

Answer 2

它应该在一个函数中，你不需要使用+:

const firstNameClass = firstNameInputHasError
? classes(["form-control invalid"])
: classes(["form-control"]);

或者简而言之:

const firstNameClass = classes(["form-control", {
'invalid': firstNameInputHasError
}
]);