react常用语法
类组件的创建和渲染:
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;
类组件的名称也必须以首字母大写开头
类组件应该继承React.Component父类,从而使用父类中提供的属性和方法
类组件必须提供Rander(),Rander必须有返回值,表示该组键UI结构
语法:on+事件名称={事件处理函数},比如:<div onClick={()=>{}}></div>
注意点:React中采用驼峰命名法。
<div className={style.img_icon} onClick={
fun(参数名)
}>
<img src={require("../assets/liebiao.png")} alt="" />
<p>订单列表</p>
</div>
引入图片:
<img src={require("../assets/jinat.png")}alt=""/>
声明变量:
import React, { useState } from "react"; //引入
const [arr, setarr] = useState(""); //第一个变量,在html中或者console时使用,后面未赋值时使用
react声明变量和vue不同。
赋值也不同:
setarr(数据名);
在react内容识别标签:
dangerouslySetInnerHTML={{ __html: 元素名 }}
在react中代码格式:
export default function Home() {
//书写JavaScript
return(
<div>
//书写内容,结果
</div>
)
}
请求接口挂载阶段:后面参数是当某个元素发生改变时执行useEffect函数的内容,如果不写后面默认参数时会无限执行。
引入:import { useEffect } from "react";
useEffect(() => {
},[])
react中如何防止css冲突:
名称.module.css