如何为元素分配类

2020-06-09 08:00:00 · 飞浪

介绍 React通过遵循基于组件的架构来创建直观的用户界面，其中每个组件由需要样式逻辑的各种HTML元素组成。有多种选项可用于设置组件的样式，您的选择最终取决于最适合您情况的可行样式。

介绍

React 通过遵循基于组件的架构来创建直观的用户界面，其中每个组件由需要样式逻辑的各种 HTML 元素组成。有多种选项可用于设置组件的样式，您的选择最终取决于最适合您情况的可行样式。

在本指南中，您将学习设置组件样式的不同方式，例如使用内联样式、使用类名和条件类名分配。

指定内联样式

内联样式赋值是用于设置元素样式的方法之一。它使用样式名称，后跟其值。

要为元素提供内联样式，请将添加的属性与名为style的元素一起使用。

下面是内联样式的完整示例。

      import React, { Component } from "react";

class InlineStyle extends Component {
  render() {
    return (
      <div>
        <span>Apply inline style to element</span>
        <div
          style={{
            position: "absolute",
            top: "50%",
            left: "50%",
            transform: "translate(-50%,-50%)"
          }}
        >
          <span>This is a centered DIV using CSS inline style</span>
        </div>
      </div>
    );
  }
}

export default InlineStyle;
    

在上面的例子中，请注意添加一个名为style 的属性，用法如下。

      style={{
       position: "absolute",
       top: "50%",
       left: "50%",
       transform: "translate(-50%,-50%)"
}}
    

它可以应用各种样式表规则，也可以使用逗号分隔符样式来拥有多个样式表规则。

指定类名

在创建任何新的 Web 应用时，您可以选择样式表配置，例如 CSS、SCSS 或 SASS。在实现所选样式表时分配样式。

为各种 HTML 元素分配类名的另一种方法是使用类名。

下面是一个简单的示例，展示如何将类名直接分配给元素。

第一步是将类添加到 CSS 样式表文件，如下所示。

样式.css

      .myDiv {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
    

创建样式表文件后，下一步是创建元素并分配之前创建的类名。

      import React, { Component } from "react";
import "./style.css";

class AssignClass extends Component {
  render() {
    return (
      <div>
        <span>Apply inline style to element</span>
        <div className="myDiv">
          <span>This is a centered DIV by applying class name</span>
        </div>
      </div>
    );
  }
}

export default AssignClass;
    

如您所见，在样式表文件中创建了类myDiv ，并且添加的属性className用于将样式应用于<table>元素。

这就是如何从样式表中直接分配类名，这是使用类名的常规方法。

有条件地分配样式或类名称

到目前为止，在本指南中，您已经了解了分配样式的简单方法，包括使用内联样式和使用样式表名称。然而，在许多情况下，您可能需要有条件地分配样式。

可以使用状态和属性、三元运算或任何其他条件运算符（例如&&（与）或||（或））有条件地分配样式或类名。

让我们像这样在文件style.css中创建样式类。

      .tableRoot {
  border: 2px solid purple
}
    

下一步是创建具有默认值的状态变量，如下所示。

      constructor() {
    super();
    this.state = {
      isTableVisible: true
    };
}
    

在上面的例子中，创建的状态变量名为isTableVisible ，默认值为 true。可以使用相同的变量来分配动态类名，如下所述。

      render() {
    return (
      <div>
        <span>Apply multiple class names</span>
        <div>
          <table className={this.state.isTableVisible ? 'tableRoot' : ''}>
            <tr>
              <td>Column 1</td>
              <td>Column 2</td>
            </tr>
            <tr>
              <td>Column 1</td>
              <td>Column 2</td>
            </tr>
          </table>
        </div>
      </div>
    );
}
    

在render()函数中，有一个<table>元素，但是规定如果 state 变量为true则应用样式，如果为false则像这样工作。

      <table className={this.state.isTableVisible ? 'tableRoot' : ''}>
    

当需要根据特定条件动态分配类或样式时，这是最好的方法之一。

使用第三方库分配多个类

到目前为止，在本指南中，您已经学习了如何使用常规方法分配样式或类，但是当需要为元素分配多个类时，请尝试下面的默认方法。

      <table className="classname1 classname2 classname3">

也可以使用第三方包classnames（一个广泛使用的 NPM 包）来分配类名，实现同样的作用。

在使用该包之前，请使用以下npm命令安装它。

      npm install classname

安装包后，按如下所示使用它。

      import React, { Component } from "react";
import classNames from "classnames";
import "./style.css";

class ClassNames extends Component {
  render() {
    return (
      <div>
        <span>Apply multiple class names</span>
        <div>
          <table className={classNames("tableRoot", "tableAnotherRoot")}>
            <tr>
              <td>Column 1</td>
              <td>Column 2</td>
            </tr>
            <tr>
              <td>Column 1</td>
              <td>Column 2</td>
            </tr>
          </table>
        </div>
      </div>
    );
  }
}

export default ClassNames;
    

这里主要关注的是使用包类名的那一行。

      <table className={classNames("tableRoot", "tableAnotherRoot")}>
    

导入方法classNames与各种类名一起用作参数。通过此方法，您可以分配多个classname，并将相关样式应用于所需元素。

结论

为元素设置样式是应用开发中的一项标准操作。您可以选择不同的样式选项（例如 CSS 或 SCSS），并创建相关类并将其与 HTML 元素一起使用。

在本指南中，您了解了应用类名和样式的所有使用场景，包括使用内联样式和类名第三方包。希望它能帮助您轻松设计应用样式。谢谢阅读！

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

_查看原文

技术指南

React框架

阅读全文

如何为元素分配类

杭州电子商务研究院

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

import React, { Component } from "react"; class InlineStyle extends Component { render() { return ( <div> <span>Apply inline style to element</span> <div style={{ position: "absolute", top: "50%", left: "50%", transform: "translate(-50%,-50%)" }} > <span>This is a centered DIV using CSS inline style</span> </div> </div> ); } } export default InlineStyle;

import React, { Component } from "react"; import "./style.css"; class AssignClass extends Component { render() { return ( <div> <span>Apply inline style to element</span> <div className="myDiv"> <span>This is a centered DIV by applying class name</span> </div> </div> ); } } export default AssignClass;

render() { return ( <div> <span>Apply multiple class names</span> <div> <table className={this.state.isTableVisible ? 'tableRoot' : ''}> <tr> <td>Column 1</td> <td>Column 2</td> </tr> <tr> <td>Column 1</td> <td>Column 2</td> </tr> </table> </div> </div> ); }

import React, { Component } from "react"; import classNames from "classnames"; import "./style.css"; class ClassNames extends Component { render() { return ( <div> <span>Apply multiple class names</span> <div> <table className={classNames("tableRoot", "tableAnotherRoot")}> <tr> <td>Column 1</td> <td>Column 2</td> </tr> <tr> <td>Column 1</td> <td>Column 2</td> </tr> </table> </div> </div> ); } } export default ClassNames;