本文介绍: JSX是一种JavaScript的语法扩展,用于描述页面,并且可以和JavaScript融合在一起,不同于Vue的模板语法,没有Vue中的一些指令(v–if,v–show,v-for),在react 中直接将 JSX 语法和 HTML 语法书写在了一起,这种写法就是JSX
1.JSX是什么
- JSX是一种JavaScript的语法扩展
- 用于描述页面,并且可以和JavaScript融合在一起
- 不同于Vue的模板语法,没有Vue中的一些指令(v–if,v–show,v-for)
- 在react 中直接将 JSX 语法和 HTML 语法书写在了一起,这种写法就是JSX
2.JSX书写规范
3.JSX中显示数据
let title = "标题"
return (<div title={title}>{user.name}</div>)
4.添加样式
<div className={divStyle}>div</div>
.divStyle{
color:red;
}
隔离作用域
import less from "./index.less"
function App =()=>{
return (<div className={less.divStyle}>div</div>)
}
// index.less
.divStyle{
color:red;
}
5.条件渲染
function App(){
const divTitle = "标签标题",
const flag = true,
let divContent = "",
if(flag) {
divContent = <div>flag == true</div>
}else{
divContent = <div>flag == false</div>
}
return (<div title={divTitle}>{divContent}{flag ? "男":"女"}</div>)
}
6.列表渲染
react 中渲染列表使用 JS的map函数,不同于Vue的v-for,
需要注意的是,通过map函数返回的标签元素,都应该有一个key属性.对于列表中的每一个元素,都应该传入一个字符串或者数字给key,用于在其兄弟节点中唯一标识该元素
function App(){
const list = [{name:"张三",id:1},{name:"李四",id:2},{name:"王五",id:3},{name:"赵六",id:4}],
const listContent = list.map((item)=> <li key={item.id}>{item.name}</>)
return (<ul>{listContent}</div>)
}
7.响应事件
在 jsx 中属性通常是以小驼峰形式命名
注意,onClick={handleClick}
的结尾没有小括号,不要调用
事件处理函数,只需要把函数传递给事件即可
.但用户点击按钮时React
会调用传递的事件处理函数
function App(){
function handleClick(){
console.log("点击了按钮")
}
return (
<button onClick={handleClick}>按钮</button>
)
}
8.更新页面
在页面将一些信息展示出来,例如一个按钮被点击的次数,这时候就需要添加state
import {useState} from "react";
function App(){
const [count,setCount] = useState(0)
function handleClick(){
setCount(count+1)
}
return (
<>
<div>{count}</div>
<button onClick={handleClick}>按钮</button>
<>
)
}
原文地址:https://blog.csdn.net/cx18333/article/details/134770578
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_37886.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。