React Lernen grundlegende Grammatik in JSX

JSX Profil

Referenz: REACT offizielle Einführung jsx 

JavaScript JSX ist eine Syntax für die UI Erweiterung beschrieben wird , ist nach wie vor im Wesentlichen die JavaScript
reagierendie eine Komponente sollte mit UI und UIBeschreibungsdaten Gesamtheit bereitgestellt werden, sollten sie nicht getrennt behandelt werden, so dass die JSX Erfindung, wie beschrieben UI Brücke zwischen UI und Daten. So können Etiketten ähnlich den Komponenten verwendet werdenin den HTMLCode der internen Komponenten der Benutzeroberfläche beschrieben, UI so intuitiv klare Struktur.
Babel Übersetzer JSX werden in ein Verfahren namens React.createElement () Aufruf umgewandelt werden, nachKompilieren es,

JSX tatsächlich in einfachen JavaScript-Objekte umgewandelt werden

 

Reagieren in JSX gemeinsame Grammatik

1 . Die grundlegende Syntax

JSX gleiche grundlegende XML Syntax und Grammatik sind gepaarte Tag-Daten eine Baumstruktur bilden,

const myElement = (
  <div>
    <h1>Hello JSX</h1>
  </div>
);

2. Typenschild

Tag - Syntax gibt zwei Arten von DOM - Tag (div, p, h1), die andere ist eine Art von Etikettenanordnung Reaktion,  wenn die DOM - Tag - Typ verwendet wird , das Etikett muss in Kleinbuchstaben Anfangsbuchstaben sein, wenn sie verwendet Reagieren Komponententyp tag wenn der erste Buchstabe des Komponentennamen , zu aktivieren. Reagiert Es ist auch der erste Buchstabe des Falles durch das Urteil gemacht DOM ist eine Art von Markierung oder ein Etikett reagiert Komponententyp  . 

// DOM类型标签
const dom_element = <h1>Hello, JSX</h1>;

// React组件类型标签

const react_element = <HelloWorld />;

// 二者可以互相嵌套使用

const my_element = (
  <div>
    <HelloWorld />
  </div>
);

3. JavaScript-Ausdruck

JSX kann JavaScript Ausdrücke verwenden, da die JSX noch im Wesentlichen JavaScript.

JSX JavaScript-Ausdruck verwendet, erfordert der Ausdruck mit der Zahnspange „{}“ Wrap.

Ausdrücke in der Szene verwendet JSX hauptsächlich zwei: durch den Ausdruck und Zuordnung zu - Tag - Attribute durch den Ausdruck definiert Baugruppe

// 通过表达式给标签属性赋值
const element = <MyComponent foo={1 + "Hi"} />;

// 通过表达式定义子组件(map虽然是函数，但它的返回值是JavaScript表达式)
const todos = [10, "hello", 50];

const element = (
  <ul>
    {
      todos.map(message => (
        <Item key={message} message={message} />
      ))
    }
  </ul>
);

Hinweis kann JSX verwenden nur Ausdrücke JavaScript, können Sie nicht mehrere Zeilen JavaScript-Anweisungen verwenden

// 错误     
const element = <MyComponent foo={const val= 1 + 2; returnval; } />;
    
let complete;

const element = (
  <div>
    { 
      if(complete){
        return < CompletedList />;
      }else { 
        return null;
      }
    }
  </div >
)

 

JSX kann ternären Operator oder Logik verwendet wird Operator (&&) statt if-Anweisung Wirkung

// 正确
let complete;
const element = <div>{complete ? <CompletedList /> : null} </div>;

//正确
let complete;
const element = <div> {complete && <CompletedList />} </div>;

4. Tagattribute

Wenn das Etikett ein DOM JSX Tag-Typ ist, schreibt der entsprechende Tag JSX DOM Träger, beispielsweise ID, Klasse, Stil, OnClick dergleichen. Jedoch einen Teil des Namens der Eigenschaft wird sich ändern, gibt es große Änderungen: class classname neu geschrieben werden sollte, Attributnamen nehmen Sie den Buckel Veranstaltungsformat, wie Onclick onClick zu schreiben. Der Grund dafür ist, Klasse ein JavaScript-Schlüsselwort ist, so geändert classname; Reagieren auf Tag unterstützt DOM-Ereignisse wieder tun, die Verpackung, eine konventionellere Höcker Nomenklatur Event-Paket mit

<div id='content' className='foo' onClick={() =>{console.log('Hello, React')}} />

Wenn der Tag React JSX Komponententyp, aus dem Attributname willkürlich Tag definiert werden kann.

<User name='React' age='4' address='America' >

5. Note

JSX kommentiert in Not Klammern "{}" wird / ** / wickeln.

 const element = ( 
    <div> 
        {/* 这里是一个注释 */} 
        <span>React</span> 
    </div>
 )

6. Tiefe JSX

JSX Verwendung in Punktnotation React Assembly verwiesen. Sie können ganz einfach eine Menge von Komponenten aus einem Modul exportieren React

import React from 'react';

const Compments= {
  DatePke: function DatePke(props) {
    return <div>Imagine a {props.color} datepicker here.</div>;
  }
}

function Picker() {
  return <Compments.DatePke color="blue" />;
}

Eigenschaft standardmäßig auf „True“, wenn Sie keinen Wert auf die Eigenschaft übergeben, wird standardmäßig true, 下边俩组件等价

<MyTextBox autocomplete />

<MyTextBox autocomplete={true} />

Verwenden  ... als „erweitern (Spread)“ Bediener das gesamte Attributobjekt passieren

function App1(props) {
  return <div>{props.children}</div>
}

function App2() {
  return (
        <App1>
            <div>hello world</div>
        </App1>
    )
}

jsx die Nachkommen weitergegeben props.children mit