reaccionar sintaxis común

 Creación y renderizado de componentes de clase:


import React from "react";
 
 class Hellow extends React.Component{
   render(){
     return  <div>这是个类组件</div>
   }
 }
function App() {
  return (
    <div className="App">
    <Hellow></Hellow>
    </div>
  );
}
 
export default App;

Los nombres de los componentes de clase también deben comenzar con una letra mayúscula inicial

Los componentes de la clase deben heredar la clase principal React.Component para usar las propiedades y los métodos proporcionados en la clase principal

Los componentes de clase deben proporcionar Rander() y Rander debe tener un valor de retorno que represente la estructura de la interfaz de usuario de la clave de grupo.

Sintaxis: on+event name={controlador de eventos}, por ejemplo: <div onClick={()=>{}}></div>

Nota: React usa nombres de mayúsculas y minúsculas .

<div className={style.img_icon} onClick={
    fun(参数名)
}>
<img src={require("../assets/liebiao.png")} alt="" />
    <p>订单列表</p>
</div>

 Importar imágenes:

 <img src={require("../assets/jinat.png")}alt=""/>

Declarar variables:

import React, { useState } from "react";   //引入
const [arr, setarr] = useState("");        //第一个变量,在html中或者console时使用,后面未赋值时使用

 React declara las variables de manera diferente a Vue.

La asignación también es diferente:

setarr(数据名);

 En las etiquetas sensibles al contenido de reacción:

dangerouslySetInnerHTML={
   
   { __html: 元素名 }}

Formato de código en reaccionar:

export default function Home() {
    //书写JavaScript
	return(
	<div>
		//书写内容,结果
	</div>
   )
}

 Request interface mount stage: este último parámetro es el contenido de la función useEffect que se ejecuta cuando cambia un elemento, si no se escribe este último parámetro por defecto se ejecutará infinitamente.

引入:import { useEffect } from "react";
useEffect(() => {

},[])

Cómo prevenir conflictos css en reaccionar:

名称.module.css

Supongo que te gusta

Origin blog.csdn.net/m0_64590669/article/details/129822916
Recomendado
Clasificación