Connaître les principes JSX dans un seul article (recommandé)

Principes JSX

Pour comprendre les principes de JSX, vous devez d'abord comprendre comment utiliser les objets JavaScript pour exprimer la structure d'un élément DOM.
Regardez la structure du DOM ci-dessous :

<div class=&#39;app&#39; id=&#39;appRoot&#39;>
  <h1 class=&#39;title&#39;>欢迎进入React的世界</h1>
  <p>
    React.js 是一个帮助你构建页面 UI 的库
  </p>
</div>

Nous pouvons utiliser des objets JavaScript pour représenter toutes les informations dans le HTML ci-dessus :

{
  tag: 'p',
  attrs: { className: 'app', id: 'appRoot'},
  children: [
    {
      tag: 'h1',
      attrs: { className: 'title' },
      children: ['欢迎进入React的世界']
    },
    {
      tag: 'p',
      attrs: null,
      children: ['React.js 是一个构建页面 UI 的库']
    }
  ]
}

Mais c'est trop long à écrire en JavaScript et la structure n'est pas claire. La façon de l'utiliser. Le HTML est très compliqué.
React.js a donc étendu la syntaxe de JavaScript pour permettre d'écrire une syntaxe similaire à la structure des balises HTML dans le code JavaScript, ce qui est beaucoup plus pratique. Le processus de compilation convertira la structure JSX similaire au HTML en structure d'objet de JavaScript.

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
  render () {
    return (
      <p className=&#39;app&#39; id=&#39;appRoot&#39;>
        <h1 className=&#39;title&#39;>欢迎进入React的世界</h1>
        <p>
          React.js 是一个构建页面 UI 的库
        </p>
      </p>
    )
  }
}

ReactDOM.render(
    <App />,
  document.getElementById(&#39;root&#39;)
)

Convertir en

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
  render () {
    return (
      React.createElement(
        "p",
        {
          className: 'app',
          id: 'appRoot'
        },
        React.createElement(
          "h1",
          { className: 'title' },
          "欢迎进入React的世界"
        ),
        React.createElement(
          "p",
          null,
          "React.js 是一个构建页面 UI 的库"
        )
      )
    )
  }
}

ReactDOM.render(
    React.createElement(App),
  document.getElementById('root')
)

React.createElement construira un objet JavaScript pour décrire les informations de votre structure HTML, y compris les noms de balises, les attributs, les sous-éléments, etc. La syntaxe est

React.createElement(
  type,
  [props],
  [...children]
)

Le soi-disant JSX est en fait un objet JavaScript, donc lorsque vous utilisez React et JSX, vous devez passer par le processus de compilation

JSX — Utilisez React pour construire des composants et compilez avec babel —> Objet JavaScript — ReactDOM.render() —> Élément DOM —> Insérer dans la page

Apprentissage recommandé : "Tutoriel de base js》

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!