Qu'est-ce que JSX ? Introduction à l'utilisation de jsx (avec code)

Qu'est-ce que jsx ? Quelles sont les utilisations de jsx ? Ce que cet article vous apporte, c'est qu'est-ce que JSX ? Une introduction à l'utilisation de jsx (avec code), jetons un coup d'œil au contenu spécifique.

En réaction, le contenu de notre page est écrit via JSX, alors qu'est-ce que JSX exactement ? JSX est en fait un objet JavaScript qui crée un objet js pour décrire les informations de la structure HTML. Rappelons ici que JSX est un langage d'extension de js, similaire au HTML mais pas au HTML, car JSX peut également effectuer des calculs, des jugements, ajouter des langages js, etc.

Utilisation des opérations jsx dans JSX

   render() {
      return(
        <div>
           <h2>算数题</h2>
           <ul>
             <li>5+6={5+6}</li>
             <li>6+6={6+6}</li>
             <li>10*10={10*10}</li>
           </ul>
        </div>
      )
    }

Dans JSX, {} est utilisé pour faire la distinction entre HTML et js. , toutes les langues js doivent être entourées de {}

Utilisation de variables dans JSX pour jsx

 render() {
      const flag = true;
      return(
        <div>
            {flag ? (<div>flag为真</div>) : (<div>flag为假</div>)}
        </div>
      )
    }

Styles dans JSX utilisant jsx

Dans JSX, l'ajout de styles aux éléments utilise également l'attribut style, mais le style contient un objet style, comme indiqué ci-dessous :

 render() {
      var newStyle = {
        background: 'blue',
        fontSize:'15px'
      }
      return(
        <div>
            <div style={{color: &#39;red&#39;}}>颜色</div>
            <div style={newStyle}>样式</div>
        </div>
      )
    }

Par l'intermédiaire du Dans les cas ci-dessus, on peut savoir qu'en JSX, les noms d'attributs de style doivent être nommés en casse chameau

L'utilisation des balises HTML jsx en JSX

En JSX, certains les noms de balises doivent être convertis pour éviter les conflits :

1. class doit être remplacé par className

2. élément lable L'attribut for dans doit être remplacé par htmlFor , comme suit :

<label htmlFor="msg" ></label>

Notez également ici que toutes les balises dans JSX doivent être des balises fermantes

Recommandations associées :

Détaillées explication de la façon dont Vue prend en charge la syntaxe JSX

Tutoriel d'introduction à l'apprentissage de la syntaxe JSX dans le framework React de JavaScript_Connaissances de base

Introduction détaillée à Réagissez

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!