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