在 React 中有条件地应用 Class

2019-07-10 08:00:00 · 飞浪

根据您的偏好和需求，您可以使用三元组或库来应用条件类名。

介绍

在构建 React 组件时，有时会遇到需要根据某些条件应用类的情况。也许，您需要根据某些状态将图像放大，或者您需要根据 prop 将图像变成圆形而不是方形，或者您想根据用户的操作截断一些文本。您可以使用 CSS 完成所有这些操作，这意味着您可以有条件地应用类名来实现此目的。

例如，您可能有一个带有 prop active的Banner组件。如果您想根据该 prop 为横幅设置不同的样式，最好的方法是什么？最好的方法之一是使用该 prop 在组件内设置不同的类名。然后，您可以编写一些 CSS，当应用该类时，该 CSS 将以不同的方式显示组件。

条件类名

有几种方法，具体取决于您的偏好和需求。最快的方法是使用三元组，另一种方法是使用库。我使用过这两种方法，具体取决于项目。

下面是我们的横幅广告示例。它有一个banner类，但我们希望在active属性为true时添加active类。

      import React from "react";

const Banner = ({ children }) => <div className="banner">{children}</div>;

export default Banner;

使用三元组

最简单的方法是在模板文字中使用三元语句。

      import React from "react";

const Banner = ({ active, children }) => (
  <div className={`banner ${active ? "active" : ""}`}>{children}</div>
);

export default Banner;
    

在这个例子中，banner始终在div上，但active依赖于active属性。

如果有很多类名需要以同一元素为条件，可能会有点混乱，但仍然有效。

      import React from "react";

const Banner = ({ active, children }) => (
  <div
    className={`banner large ${active ? "active" : ""} ${
      disabled ? "disabled" : ""
    }`}
  >
    {children}
  </div>
);

export default Banner;
    

在这个例子中，banner和large始终在div上，但active依赖于active属性，而disabled依赖于disabled属性。

使用 Classnames 库

如果您发现自己经常这样做，或者如果您在同一元素上有条件地使用多个类，您可能会发现使用一个简单的 JavaScript 库来有条件地一起应用类名很有用。这个库叫做Classnames，它是一个普通的 JavaScript 库，因此它可以与 React 和其他 JavaScript 框架很好地配合使用。

要使用它，只需使用yarn add classnames或npm install classnames安装它。然后你可以导入它，并且可以在你的组件中使用它，如下所示：

      import React from "react";
import classNames from "classnames";

const Banner = ({ active, children, disabled }) => (
  <div
    className={classNames({
      banner: true,
      large: true,
      active: active,
      disabled: disabled
    })}
  >
    {children}
  </div>
);

export default Banner;
    

如果您有始终希望包含的类，则可以将它们设置为true，如上例所示，或者您可以将它们作为字符串参数传递给classNames，如下所示：

      import React from "react";
import classNames from "classnames";

const Banner = ({ active, disabled }) => (
  <div
    className={classNames("banner", "large", {
      active: active,
      disabled: disabled
    })}
  >
    {children}
  </div>
);

export default Banner;
    

另外，如果classNames对你来说太长，请记住你可以用任何你喜欢的名字导入它。我见过使用得最多的一个名字是cx。因此你可以像这样导入它：

      import cx from 'classnames';
    

结论

你可以用它做很多事情！你不仅可以使用 props 有条件地应用类名，还可以使用状态和其他派生值。在 React 组件中使用 JavaScript 自动添加和删除类，享受乐趣吧。

并且，如果您有兴趣使用 Classnames，请务必查看 GitHub 上的文档：GitHub - JedWatson/classnames：一个用于有条件地将 classNames 连接在一起的简单 javascript 实用程序。

了解更多

探索 Pluralsight 的这些 React 课程以继续学习！

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

在 React 中有条件地应用 Class

杭州电子商务研究院

5年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import React from "react"; const Banner = ({ active, children }) => ( <div className={`banner large ${active ? "active" : ""} ${ disabled ? "disabled" : "" }`} > {children} </div> ); export default Banner;

import React from "react"; import classNames from "classnames"; const Banner = ({ active, children, disabled }) => ( <div className={classNames({ banner: true, large: true, active: active, disabled: disabled })} > {children} </div> ); export default Banner;

import React from "react"; import classNames from "classnames"; const Banner = ({ active, disabled }) => ( <div className={classNames("banner", "large", { active: active, disabled: disabled })} > {children} </div> ); export default Banner;