Reaccionar aprendizaje de la gramática básica en JSX

Perfil JSX

Referencia: REACT JSX oficial de introducción 

JavaScript JSX es una sintaxis para describir la expansión de interfaz de usuario, se siguen esencialmente el JavaScript
Reaccionar que un componente debe estar provista de interfaz de usuario y la interfaz de usuario totalidad de descripción de datos, no deben ser tratados por separado, por lo que la invención JSX, como se describe UI tender un puente entre la interfaz de usuario y los datos. Por lo tanto, las etiquetas se pueden utilizar similar a los componentes descritos en el HTML de los componentes internos de la interfaz de usuario, la interfaz de usuario estructura tan intuitivamente claro.
Babel Traductor JSX será convertido en un método denominado React.createElement () llamada, después de la compilación,

JSX realmente puede convertir en objetos JavaScript lisos

 

JSX reaccionar de la gramática común

1 . La sintaxis básica

JSX misma gramática y la sintaxis XML básica se combinan datos de la etiqueta que constituyen una estructura de árbol

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

2. Tipo de etiqueta

sintaxis Tag dos tipos de etiqueta DOM (div, p, h1), el otro es un tipo de etiqueta Reaccionar montaje,  cuando se utiliza el tipo de DOM de la etiqueta, la etiqueta debe estar en minúscula primera carta; cuando se utiliza Reaccionar etiqueta tipo de componente cuando la primera letra del nombre del componente debe ser capitalizada. Reaccionar También es la primera letra del caso por la sentencia dictada DOM es un tipo de etiqueta o una etiqueta Reaccionar tipo de componente  . 

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

// React组件类型标签

const react_element = <HelloWorld />;

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

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

3. expresión de JavaScript

JSX puede utilizar expresiones de JavaScript, ya que el JSX siendo esencialmente JavaScript.

JSX usando expresión de JavaScript requiere la expresión con la llaves "{}" envoltura.

Expresiones usadas en la escena JSX principalmente dos: por la expresión, y la asignación a la etiqueta atributos definidos por el subconjunto de expresión

// 通过表达式给标签属性赋值
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>
);

Nota, JSX sólo puede utilizar expresiones de JavaScript, no se puede utilizar varias líneas de sentencias de JavaScript

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

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

 

JSX puede utilizarse operador ternario o lógica (&&) operador en lugar si el efecto declaración

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

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

4. atributos de etiqueta

Cuando la etiqueta es un tipo DOM JSX de etiqueta, la etiqueta correspondiente atributos soportados soportes JSX DOM, por ejemplo, ID, clase, estilo, onclick similares. Sin embargo, parte del nombre de la propiedad va a cambiar, hay cambios importantes: la clase debe ser reescrita className, nombres de atributos toman el formato del evento joroba, como onclick para escribir onClick. La razón es, la clase es una palabra clave JavaScript, por lo className cambiado; reaccionar a los eventos DOM soportes de etiquetas que volver a hacer el envase, utilizando un paquete de evento nomenclatura joroba más convencional

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

Cuando la etiqueta es JSX Reaccionar tipo de componente, desde el nombre de atributo puede ser la etiqueta arbitrariamente definido.

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

5. nota

JSX comenta en apoyos necesidad "{}" voluntad / ** / envoltura.

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

6. profundidad JSX

uso JSX en notación de puntos Reaccionar referencia de montaje. Usted puede exportar una gran cantidad de componentes de un módulo Reaccionar

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" />;
}

incumplimientos de propiedad a "true", si no se pasa un valor a la propiedad, el valor predeterminado true, 下边俩组件等价

<MyTextBox autocomplete />

<MyTextBox autocomplete={true} />

Utilice  ... como "ampliar (Spread)" operador para pasar todo el objeto atributo

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

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

JSX la progenie aprobó el uso de props.children