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 (
      1fb07efbe2524295a719668b214948aa
        345d5db7f2762808d7874072253db7c0欢迎进入React的世界473f0a7621bec819994bb5020d29372a
        e388a4556c0f65e1904146cc1a846bee
          React.js 是一个构建页面 UI 的库
        94b3e26ee717c64999d7867364b1b4a3
      94b3e26ee717c64999d7867364b1b4a3
    )
  }
}

ReactDOM.render(
    3efbfcf616b81c5b71826e3d65d503c4,
  document.getElementById('root')
)

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!