Connaître les principes JSX dans un seul article (recommandé)-js tutoriel-php.cn

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

藏色散人

Libérer： 2022-01-14 09:04:53

avant

1662 Les gens l'ont consulté

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>

Copier après la connexion

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

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

Copier après la connexion

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 &#39;react&#39;
import ReactDOM from &#39;react-dom&#39;

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;)
)

Copier après la connexion

Convertir en

import React from &#39;react&#39;
import ReactDOM from &#39;react-dom&#39;

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

ReactDOM.render(
    React.createElement(App),
  document.getElementById(&#39;root&#39;)
)

Copier après la connexion

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]
)

Copier après la connexion

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

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!