React.js 问题：如何使用三元运算符将多个类应用于组件？

Question

我想使用三元运算符将多个类应用于组件。有一个共享的 ts 主题文件，其中包含常规按钮样式，但我想根据屏幕宽度在此特定组件中以不同方式显示它们的大小，因此也为此添加了本地范围的类。

对此最好的方法是什么？

...尝试过这个，但不起作用：

...使用类名让它工作。

Answer 1

classNames我通常使用一个名为： https: //www.npmjs.com/package/classnames的小型 npm 包。

它公开了一个采用可变数量参数的函数。如果您给出字符串，它们基本上会用空格连接，因此您将它们全部应用：

<Button className={ classNames('first', 'second') } ...

会像这样做：

<Button className="first second" ...

该包的一个很好的功能是，它可以采用一个对象，其中键是类，值是一个布尔值，指示是否添加此类，如下所示：

<Button className={ classNames({ even: index % 2 === 0, disabled: props.isDisabled }) } ...

现在，如果index是类似于 的内容2，则该类even将添加到元素中。