几种不同的技术来设计一些简单的React元素

设计你的React组件是创造有用和有意义的用户体验的一个重要部分。此外，这些构件决定了一个产品或品牌的感觉和外观。在React中，就像在大多数Web开发中一样，有更多的方法来解决这个挑战。我们将看看两个简单的方法来处理React组件的样式问题，然而，你可能会发现更符合你的喜好的方法。现在让我们为React中的几个元素设置样式。

---

用className添加样式

在JSX里面，我们可以给元素应用一个样式。然而，由于JSX编译成JavaScript，你不能使用常规的class关键字作为属性。相反，你需要使用className作为一个属性来为JSX中的任何元素设置样式。JavaScript已经有自己的class关键字，所以如果你试图使用它，你会得到错误。因此，让我们给我们的span元素添加一个简单的徽章样式。我们将选择badge badge-info来为span样式。

import React, { Component } from "react";

class Item extends Component {
  state = {
    count: 0
  };

  render() {
    return (
      <React.Fragment>
        <span className="badge badge-info m-1">{this.styleCount()}</span>
        <button>Increment</button>
      </React.Fragment>
    );
  }

  styleCount() {
    const { count } = this.state;
    return count === 0 ? "No Items" : count;
  }
}

export default Item;

我们还使用m-1添加了一丝边距，以获得一个漂亮的效果。

既然如此，让我们再一次在按钮元素上使用className属性，让它看起来更漂亮。让我们试试btn btn-primary，看看它看起来如何。

import React, { Component } from "react";

class Item extends Component {
  state = {
    count: 0
  };

  render() {
    return (
      <React.Fragment>
        <span className="badge badge-info m-1">{this.styleCount()}</span>
        <button className="btn btn-primary">Increment</button>
      </React.Fragment>
    );
  }

  styleCount() {
    const { count } = this.state;
    return count === 0 ? "No Items" : count;
  }
}

export default Item;

---

类与样式

现在我们知道了如何使用className属性在JSX中为一个元素应用类。对于性能和易用性来说，这是一个好方法。另一个选择是使用JSX中的style属性，它接受一个普通的JavaScript对象作为值。这意味着你不使用CSS语法，而是使用CSS语法的Camel-cased JavaScript版本。这可以在内联中完成，也可以用一个不同的对象。让我们来看看这两种方法。

---

内联样式

注意，对于样式属性，有双大括号**{{ }}。这不是特殊的语法。外侧的大括号告诉JSX，即将到来的是动态内容。如果它是静态的，可以使用双引号""**。内部大括号是JavaScript对象的语法。该对象有键值对来表示要使用的样式。

import React, { Component } from "react";

class Item extends Component {
  state = {
    count: 0
  };

  render() {
    return (
      <React.Fragment>
        <span
          style={{ border: "7px solid lightgray" }}
          className="badge badge-info m-1"
        >
          {this.styleCount()}
        </span>
        <button className="btn btn-primary">Increment</button>
      </React.Fragment>
    );
  }

  styleCount() {
    const { count } = this.state;
    return count === 0 ? "No Items" : count;
  }
}

export default Item;

---

使用JavaScript对象的样式

就像我们在组件中创建了一个状态对象，我们也可以创建一个样式属性来填充JavaScript样式。当你可能有几个键值对时，这是一个很好的方法。内联的方法会变得很乱，很难推理。下面是一个增加了一些样式的例子。

import React, { Component } from "react";

class Item extends Component {
  state = {
    count: 0
  };

  styles = {
    border: "7px solid lightgray",
    fontSize: 15,
    fontStyle: "italic"
  };

  render() {
    return (
      <React.Fragment>
        <span style={this.styles} className="badge badge-info m-1">
          {this.styleCount()}
        </span>
        <button className="btn btn-primary">Increment</button>
      </React.Fragment>
    );
  }

  styleCount() {
    const { count } = this.state;
    return count === 0 ? "No Items" : count;
  }
}

export default Item;

---

在React中动态地应用类

随着状态的变化，你经常想改变页面上某个元素的视觉风格。这样你就可以用简单的逻辑来选择是否应用一个或另一个类。所以我们在这里要做的是看count变量中的值。如果count的值为0，那么我们将应用黄色的徽章，否则，我们将对徽章应用一种信息色。下面是如何做到这一点的。

import React, { Component } from "react";

class Item extends Component {
  state = {
    count: 10
  };

  render() {
    let classes = "badge m-3 badge-";
    classes += this.state.count === 0 ? "warning" : "info";

    return (
      <React.Fragment>
        <span className={classes}>{this.styleCount()}</span>
        <button className="btn btn-primary">Increment</button>
      </React.Fragment>
    );
  }

  styleCount() {
    const { count } = this.state;
    return count === 0 ? "No Items" : count;
  }
}

export default Item;

当计数为10时，我们就得到了徽章的信息颜色。

把这个计数设为0，我们就能看到另一种样式。酷！"。

  state = {
    count: 0
  };

---

将逻辑提取到一个方法中

上面的代码是有效的，但让我们把它清理一下。我们想把逻辑从render()方法中移除，并把它放在Item类中自己的方法中。在visual studio代码中，我们可以通过高亮显示我们想要重构的行，右键点击，然后选择 "重构... "来自动完成。

在重构过程中，你可以为新方法选择一个名称。下面是我们完成这一步骤后得到的结果。

import React, { Component } from "react";

class Item extends Component {
  state = {
    count: 0
  };

  render() {
    return (
      <React.Fragment>
        <span className={this.styleBadge()}>{this.styleCount()}</span>
        <button className="btn btn-primary">Increment</button>
      </React.Fragment>
    );
  }

  styleBadge() {
    let classes = "badge m-3 badge-";
    classes += this.state.count === 0 ? "warning" : "info";
    return classes;
  }

  styleCount() {
    const { count } = this.state;
    return count === 0 ? "No Items" : count;
  }
}

export default Item;

这样可以保持render()方法的简洁，使代码更容易阅读。

---

React元素的简单样式设计技术总结

在本教程中，我们看了如何使用几种不同的技术来设计一些简单的React元素。最简单的方法是简单地包含一个伟大的CSS框架，如Bootstrap或Foundation，并使用这些类与className属性相结合。另一个选择是结合使用style属性和包含特定样式键值对的JavaScript对象。