CSS 使用React多个CSS条件类

在本文中，我们将介绍如何在React中使用多个CSS条件类来实现不同的样式。

阅读更多：CSS 教程

什么是多个CSS条件类？

多个CSS条件类是指在应用样式时，根据条件来选择应用某个特定的CSS类。在React中，我们可以使用条件渲染来决定应用哪个CSS类。这样，根据不同的条件，我们可以为元素应用不同的样式。

在React中使用多个CSS条件类

在React中，我们可以使用条件渲染的技术来应用多个CSS条件类。下面是一个示例：

import React from 'react';
import './styles.css';

class Button extends React.Component {
  render() {
    const { primary, danger, success } = this.props;
    let classNames = "button";

    if (primary) {
      classNames += " button-primary";
    }

    if (danger) {
      classNames += " button-danger";
    }

    if (success) {
      classNames += " button-success";
    }

    return (
      <button className={classNames}>
        {this.props.children}
      </button>
    );
  }
}

export default Button;

在上面的示例中，我们创建了一个名为Button的React组件，并根据不同的条件为按钮应用不同的CSS类。其中，primary、danger和success是三个布尔属性，用于控制应用不同的样式。

在render方法中，我们定义了一个变量classNames，它用于存储最终应用的CSS类。在根据条件判断是否应用特定的CSS类之后，我们返回一个包含特定CSS类的按钮元素。

使用这个Button组件的示例可以这样写：

import React from 'react';
import Button from './Button';

class App extends React.Component {
  render() {
    return (
      <div>
        <Button primary>Primary Button</Button>
        <Button danger>Danger Button</Button>
        <Button success>Success Button</Button>
      </div>
    );
  }
}

export default App;

在上面的示例中，我们通过在<Button>元素中传递primary、danger和success属性，来控制按钮的样式。根据不同的属性，按钮将应用不同的CSS类。

更复杂的CSS条件类

除了简单的条件类之外，我们还可以使用更复杂的条件来控制CSS类的应用。下面是一个示例：

import React from 'react';
import './styles.css';

class Alert extends React.Component {
  render() {
    const { type, dismissible } = this.props;
    let classNames = "alert";

    if (type === "success") {
      classNames += " alert-success";
    } else if (type === "warning") {
      classNames += " alert-warning";
    } else if (type === "error") {
      classNames += " alert-error";
    }

    if (dismissible) {
      classNames += " alert-dismissible";
    }

    return (
      <div className={classNames}>
        {this.props.children}
      </div>
    );
  }
}

export default Alert;

在上面的示例中，我们定义了一个名为Alert的React组件，并根据不同的条件来应用不同的CSS类。type属性用于指定警告的类型，dismissible属性用于指定是否可以关闭警告。

根据type属性的不同值，我们为警告应用了不同的CSS类。而根据dismissible属性的布尔值，我们决定是否为警告应用alert-dismissible这个CSS类。

使用这个Alert组件的示例可以这样写：

import React from 'react';
import Alert from './Alert';

class App extends React.Component {
  render() {
    return (
      <div>
        <Alert type="success">This is a success alert</Alert>
        <Alert type="warning">This is a warning alert</Alert>
        <Alert type="error" dismissible>This is an error alert</Alert>
      </div>
    );
  }
}

export default App;

在上面的示例中，我们通过在<Alert>元素中传递type和dismissible属性，来控制警告的样式。根据不同的属性，警告将应用不同的CSS类。