Resumen de los conceptos básicos de gramática JSX

Título: Primero que nada, debemos entender qué es jsx y cuál es la diferencia entre este y js. De hecho, es el azúcar gramatical de js, más la sintaxis de xml, lo que hace que sea más conveniente generar dom virtual. En pocas palabras, xml es el formato para almacenar datos. Si desea comprender xml, puede compararlo con el formato json.

Ejemplo:

//用js去写

let Dom = React.creatElemnt('h1',{id:'header'},'你好啊');
let Doms = React.creatElemnt('h1',{id:'header'},React.craetElement('span',{id:'center'},"你好啊")


//用jsX写
let Dom = (
    <h1 id='title'>
        你好
    </h1>
)

let Doms = (
    <h1 id='title'>
       <span>
        你好
       </span>
    </h1>
)

reglas de sintaxis jsx:

01. Comillas desordenadas al definir.

let Doms = (
    <h1 id='title'>
       <span>
        你好
       </span>
    </h1>
)

02. La expresión mezclada en la etiqueta está envuelta con {}.

      Nota: Las expresiones son diferentes de las declaraciones de código, es decir, las declaraciones if y for no pueden estar envueltas por {}; las funciones y variables son expresiones, y for y if se llaman declaraciones de código.

let name = 'title'
let commins = '你好'

let Doms = (
    <h1 id={title}>
       <span>
        {commins}
       </span>
    </h1>
)

let name = 'title'
let commins = '你好'
let arr = ['a','b','c]
let Doms = (
    <div id={title}>
       <span>
        {Array.map((item,index)=>
            {
             return <li key={index}>{item}</li>      
            )}
       </span>
    </div>
)

 

03. El tipo de designación de estilo no usa clase, sino nombre de clase;

let name = 'title'
let commins = '你好'
let niu = 'niuniu'
let Doms = (
    <h1 id={title} className={niu}>
       <span>
        {commins}
       </span>
    </h1>
)

04. Agregue { {}} al estilo en línea ;

let name = 'title'
let commins = '你好'

let Doms = (
    <h1 id={title}>
       <span style={
   
   {margin:20px}}>
        {commins}
       </span>
    </h1>
)

05. Solo hay una etiqueta raíz, igual que Vue2;

06. La etiqueta debe estar cerrada;

07. Iniciales de la etiqueta

        1. Si comienza con una letra minúscula, se convertirá en una etiqueta html;

        2. Si comienza con una letra mayúscula, encontrará el componente correspondiente. Si no existe dicho componente, se informará un error y se combinará con la convención de nomenclatura de componentes de Vue;