How to implement dynamic binding of Class and Style in React-JSX (with examples)

The content of this article is about how to implement dynamic binding of Class and Style in React-JSX (with examples). It has certain reference value. Friends in need can refer to it. I hope it will be useful to you. helped.

Abstract: Manipulating the class list and inline style of elements is a common requirement for data binding. Frequent manipulation of dom elements will reduce JavaScript performance. In order to achieve high-performance js, dynamic binding of classes and styles is a high level of literacy. A must for programmers. This article is based on React-JSX syntax and combined with the implementation methods of other frameworks to introduce how to implement dynamic binding of ClassName and Style.

Note: The examples in this article have been verified. If there are any errors, please criticize and correct them.

Binding HTML Class

Object syntax

We can pass Give className an object to dynamically switch classes:

Note: Using object syntax like vue, applet, etc. is not supported

Error example:

render(){
  return <p>hello world</p>
}

Can be achieved The syntax is as follows:

1. Use logical operators

css file

.box-color {
  color：red;
}

js file

render(){
  return <p>hello world</p>
}

2. Use ternary operator

css file

.box-show {
  display: block;
}

.box-hide {
  display: none;
}

render(){
  return <p>hello world</p>
}

3. Data objects bound using functions

do not have to be defined inline in the template: you can define a function, similar to the computed hook function in vue

js file

getIsError() {
  return this.state.isError ? 'box-color' : '';
}

render(){
  return <p>hello world</p>
}

Note: The following way of writing object variables is not supported and no error will be reported. The console className is displayed as [object object], which is invalid.

const classObj = {
  'box-show': this.state.isShow,
  'box-color': this.state.isError
}

render(){
  return <p>hello world</p>
}

Generally, the function binding method is used in scenarios with complex project logic. If used too much, the view layer and logic layer will be confused and difficult to read and maintain. It is recommended to use logical operators and ternary operations. Character method dynamically binds Class.

Array syntax

React-JSX syntax does not support className array syntax, try the example:

css file

.box-hide {
  display: none;
}

.box-color {
  color：red;
}

js file

this.state = {isShow: false}

render(){
  return <p>hello world</p>
}

Console display result (invalid, there is an extra comma in the middle):

<p>hello world</p>

Note: Since array syntax is not supported, you can only reuse the styles in "box-color" to "box-hide" ", use the ternary operator to represent it, which virtually increases the amount of css code.

Bind inline style

Object syntax

The style object syntax is more intuitive than the clasName object, and the processing functions are simpler. The logical operator method and function binding method can Referring to the implementation of className, the following only introduces the use of the ternary operator:

Ternary operator

is similar to Vue's vue-if and WeChat applet's wx-if instruction. You can use style Dynamic implementation of ternary operator

js file

render(){
  return <p>hello world</p>
}

Array syntax

React-JSX syntax also does not support style array syntax, try the example:

js file

render(){
  return <p></p>
}

The console displays the result (invalid):

<p></p>

In short, in order to complete the project requirements with high quality and cope with increasingly complex business scenarios, which involves a large number of dom elements, It is not recommended to name a style variable arbitrarily and then bind it to class and style.

Recommended related articles:

html implements a simple registration page (with code)

link tag link CSS and @import loading What's the difference?

The above is the detailed content of How to implement dynamic binding of Class and Style in React-JSX (with examples). For more information, please follow other related articles on the PHP Chinese website!