Quelle est la méthode pour créer des éléments en réaction

Comment créer des éléments dans React : 1. Utilisez la syntaxe JSX pour créer des éléments React, avec une syntaxe telle que "const element =

Bonjour, monde

;" 2. Via "React.createElement(type ,props, children)" syntaxe pour créer des éléments React.

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 18.0.0, ordinateur Dell G3.

Quelle est la manière de créer des éléments en réaction ?

Créer un élément de réaction

Élément React

Élément React (élément React), qui est la plus petite unité de base de React. Un élément React est en fait un simple objet JavaScript (communément appelé : DOM virtuel). Un élément React correspond à une partie du DOM sur l'interface, décrivant la structure et l'effet de rendu de cette partie du DOM.

Les éléments React ne sont pas de vrais éléments DOM, il n'y a donc aucun moyen d'appeler directement l'API native sur le DOM.

Processus de rendu : réagissez au DOM virtuel de description de l'élément, puis restituez le DOM réel basé sur le DOM virtuel.

• DOM virtuel : il utilise la structure d'objet js pour simuler la structure dom en HTML. Pour les ajouts, suppressions, modifications et requêtes par lots, les objets js sont d'abord directement manipulés, et enfin mis à jour dans la véritable arborescence DOM. Parce que l'exploitation directe des objets js est plus rapide que les API qui exploitent le DOM.
• Les éléments React sont des objets js, qui indiquent à React ce que vous souhaitez afficher sur la page.

En général :

les éléments sont de purs objets utilisés pour décrire des nœuds DOM ou des composants React. Les éléments peuvent contenir d'autres éléments dans leurs propres attributs. Le coût de création d'un élément est très faible. Une fois qu'un élément est créé, il ne change jamais.

Par exemple : nous utilisons la syntaxe JSX pour créer un élément React element

const element = <h1 className=&#39;greeting&#39;>Hello, world</h1>;

Pendant le processus de compilation, JSX sera compilé dans un appel à React.createElement(). Le résultat compilé de l'exemple ci-dessus est :

const element = React.createElement(
    'h1',
    {className: 'greeting'},
    'Hello, world!'
);

Enfin. , element La valeur sera compilée dans un objet js similaire au suivant

const element = {
    type: 'h1',
    props: {
        className: 'greeting',
        children: 'Hello, world'
    }，
    _context: Object,
    _owner: null,
    key: null,  
    ref: null, 
}

Méthodes pour créer des éléments React

1 Utilisez la syntaxe JSX

const element = <h1>Hello, world</h1>;

2.React.createElement(type,props,children. )

Syntaxe Description du paramètre

type : Indique le type d'élément, tel que : h1, div, p, etc. Il peut s'agir d'une

• chaîne (comme div, p, h1...)

• composant (Composant personnalisé : un composant créé par un constructeur ou un composant créé par une classe ; react native Component : React.Fragment, etc.) 自定义组件：构造函数创建的组件或class创建的组件；react 原生组件：React.Fragment等）

props：表示该元素上的属性，使用 JavaScript 对象的方式表示

children：表示该元素内部的内容，可以是文字，也可以继续嵌套另一个React.createElement(type,props,children)。

其中 children 可以是一个 React.createElement 列表

props : Représente les attributs de l'élément, exprimés à l'aide d'objets JavaScript

children : Représente le contenu à l'intérieur de l'élément, qui peut être texte ou peut continuer à être imbriqué Un autre React.createElement(type,props,children). où les enfants peuvent constituer une liste React.createElement, ou peuvent être écrits sous forme de plusieurs paramètres :

  <script type="text/babel">
    const child1 = React.createElement("li",null,"one");
    const child2 = React.createElement("li",null,"two");
    const content = React.createElement("ul",{className:"testStyle"},[child1,child2]);

    ReactDOM.render(
        content,
        document.getElementById("example")
    );
    //或者
    const child1 = React.createElement("li",null,"one");
    const child2 = React.createElement("li",null,"two");
    const content = React.createElement("ul",{className:"testStyle"},child1,child2);

    ReactDOM.render(
        content,
        document.getElementById("example")
    ); 
  </script>

🎜🎜🎜React.createElement renvoie les attributs d'objet d'instance🎜

const div = React.createElement('div', { id: 'box'}, 'test');console.log(div)

apprentissage recommandé : "🎜tutoriel vidéo React🎜 " 🎜

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!