JIYIK CN >

When developing complex applications, it's not uncommon to have HTML elements with multiple classes. If you're familiar with HTML and CSS, you're probably familiar with the syntax for setting multiple classes. In this article, we'll look at a number of different ways to do this in React.

Most React developers use JSX, a special syntax for writing simple component definitions. Its syntax is very similar to HTML, which is why most React developers prefer it. There are some essential differences regarding setting classes.

In HTML, you may be used to classsetting classes using the Attribute. Since React components can be defined as instances of classes, Class is a reserved word. Therefore, developers must use classNamethe Attribute instead.

In JSX, classNameattributes must be set equal to a string. A simple definition containing multiple classes looks like this:

<h1 className="classOne classTwo">Hi! Try edit me</h1>

Alternatively, you can classNameset the property equal to a JavaScript expression that returns a string. To ensure that the expression is correctly interpreted as JavaScript code, you must enclose them between curly braces. Let's look at an example:

const color = "white"
<h1 className={"classOne " + color }>Hi! Try edit me</h1>;

In this example, we added a regular string and a string value contained in a variable. Once the expression is evaluated, our classNameproperty will be equal to 'classOne white'the string.

We can make the expression more readable by +replacing the operator with .concat()the method, which concatenates two strings into one.

const color="white"    
h1 className={"classOne ".concat(color)}>Hi! Try edit me</h1>

This standard JavaScript method can be used to convert an array of string values ​​into multiple classNamevalues. Since it is a JavaScript method, we need to put the entire expression between curly braces in JSX.

By default, combined string values ​​will be separated by commas. However, to produce a valid classNamelist of values, we need to separate them with a single space. Fortunately, we can ' 'specify the separator by passing a single space string as an argument to the method. Here is an example:

class App extends Component {
  render() {
    const arr = ["bold", "primary", "lead"]
    return (<div><p className={arr.join(" ")}>Hi! Try edit me</p></div>)
  }
}

In the file on playcodestyles.css , we define three classes:

.lead {
  font-size: 40px;
}
.bold {
  font-weight: bold;
}
.primary {
  color: white
}

After executing the code inside the curly braces, you can see that all three classes are applied.

You can also view the source code to verify that these classes are applied to <p>the element.

<div id="app">
    <div class="container black">
        <p class="bold primary lead">Hi! Try edit me</p>
    </div>
</div>

In ES6, we can use array destructuring syntax to create a nice custom function that returns a formatted string that we can use as classNamea value.

Let's look at the code:

class App extends Component {
  render() {
    const classNameGenerator = (...classes)=>{
      return classes.join(" ")
    }
    return (<div className={classNameGenerator("container")}></div>)
  }
}

This function treats its arguments as array items and then .join()returns classNamea formatted list of values ​​using the method.

When using this function, you can pass as many string values ​​as you want.

Conditionally applying classNamea value is useful for changing the appearance of an element based on user input. For example, if your app has dark and light themes, its background should also switch from light to dark. Here is a code example:

const lightBackground = !this.state.darkTheme ? "white" : "black"
<div className={classNameGenerator("container") + " " + lightBackground }></div>

lightBackgroundThe variable darkThemeis assigned to one of two strings depending on the value of the state property. In addition to calling classNameGenerator("")the function, we also use +the operator to include conditional values ​​for the variable.

To better demonstrate, our playcode application contains a button that toggles the value darkThemeof a property boolean.