Comment implémenter la liaison dynamique de classe et de style dans React-JSX (avec exemples)

Le contenu de cet article explique comment implémenter la liaison dynamique de classe et de style dans React-JSX (avec des exemples). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. . a aidé.

Résumé : La manipulation des listes de classes et des styles en ligne des éléments est une exigence courante pour la liaison de données. La manipulation fréquente des éléments dom réduira les performances de JavaScript. Afin d'obtenir des js hautes performances, la liaison dynamique des classes et des styles est nécessaire. un haut niveau d'alphabétisation. Un must pour les programmeurs. Cet article est basé sur la syntaxe React-JSX et combiné avec les méthodes d'implémentation d'autres frameworks pour présenter comment implémenter la liaison dynamique de ClassName et Style.

Remarque : les exemples de cet article ont été vérifiés. S'il y a des erreurs, veuillez les critiquer et les corriger

Lier la classe HTML

Syntaxe de l'objet

Nous pouvons transmettre à Give className un objet pour changer dynamiquement de classe :

Remarque : l'utilisation de la syntaxe d'objet comme vue, applet, etc. n'est pas prise en charge

Exemple d'erreur :

render(){
  return <p className={ &#39;box-color&#39;：this.state.isError }>hello world</p>
}

La syntaxe qui peut être implémentée est la suivante :

1. Utiliser les opérateurs logiques

fichier css

.box-color {
  color：red;
}

fichier js

render(){
  return <p className={ this.state.isError && &#39;box-color&#39; }>hello world</p>
}

2. Utilisez trois opérateurs Meta

fichier CSS

.box-show {
  display: block;
}

.box-hide {
  display: none;
}

render(){
  return <p className={ this.state.isShow ? &#39;box-show&#39; : &#39;box-hide&#39; }>hello world</p>
}

3. Les objets de données liés à l'aide de la fonction

n'ont pas besoin d'être définis en ligne dans le modèle. : vous pouvez définir une fonction, similaire à la fonction hook calculée dans vue

fichier js

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

render(){
  return <p className={ this.getIsError() }>hello world</p>
}

Remarque : La manière suivante d'écrire des variables d'objet n'est pas prise en charge et ne signalera pas d'erreur . Le nom de classe de la console s'affiche sous la forme [ object object], non valide.

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

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

Généralement, la méthode de liaison de fonctions est utilisée dans des scénarios où la logique du projet est relativement complexe. Si elle est trop utilisée, la couche de vue et la couche logique seront mélangées et confuses, ce qui rendra la lecture difficile. et maintenir Il est recommandé d'utiliser des opérateurs logiques et trois méthodes métaopérateurs lie dynamiquement la classe.

Syntaxe du tableau

La syntaxe React-JSX ne prend pas en charge la syntaxe du tableau className, essayez l'exemple :

fichier css

.box-hide {
  display: none;
}

.box-color {
  color：red;
}

fichier js

this.state = {isShow: false}

render(){
  return <p className={ this.state.isShow ? &#39;box-color&#39; : [ &#39;box-color&#39;, &#39;box-hide&#39;] }>hello world</p>
}

La console affiche le résultat (invalide, il y a une virgule supplémentaire au milieu) :

<p class="box-color, box-hide">hello world</p>

Remarque : la syntaxe des tableaux n'étant pas prise en charge, vous ne pouvez copier les styles que dans "box-color" Lorsqu'il est utilisé dans "box-hide", l'opérateur ternaire est utilisé pour le représenter, ce qui augmente virtuellement la quantité de code CSS.

Style de liaison en ligne

Syntaxe de l'objet

La syntaxe de l'objet de style est plus intuitive que l'objet clasName, et les fonctions de traitement sont plus simples. l'implémentation de className, ce qui suit présente uniquement l'utilisation de l'opérateur ternaire :

Opérateur ternaire

Semblable à l'instruction vue-if de Vue et wx-if de l'applet WeChat, vous pouvez utiliser le style Implémentation dynamique de l'opérateur ternaire

fichier js

render(){
  return <p style={ this.state.isShow ? {display: &#39;inline-block&#39;} : { display: &#39;none&#39;} }>hello world</p>
}

syntaxe de tableau

La syntaxe React-JSX ne prend pas non plus en charge la syntaxe de tableau de style, essayez l'exemple :

js

render(){
  return <p style={ this.state.isShow ? {color: &#39;red&#39;} : [{color: &#39;red&#39;}, {display: &#39;inline-block&#39;}] }></p>
}

Résultat de l'affichage de la console (invalide) :

<p></p>

En bref, afin de répondre aux exigences du projet avec une haute qualité et de faire face à des scénarios commerciaux de plus en plus complexes, alors il est Il n'est pas recommandé d'exploiter un grand nombre d'éléments DOM, de nommer aléatoirement une variable de style, puis de la lier à une classe et à un style.

Articles connexes recommandés :

implémentation HTML d'une page d'inscription simple (avec code)

link tag link CSS et @import chargement Quelle est la différence ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!