本文介绍: JSX是一种JavaScript语法扩展,用于描述页面,并且可以和JavaScript融合在一起,不同于Vue模板语法,没有Vue中的一些指令(vif,vshow,v-for),在react直接将 JSX 语法和 HTML 语法书写在了一起,这种写法就是JSX

1.JSX是什么

2.JSX书写规范

3.JSX中显示数据

JSX中使用大括号,把变量嵌入代码展示用户

let title = "标题"
return (&lt;div title={title}&gt;{user.name}</div&gt;)

4.添加样式

<div className={divStyle}&gt;div</div&gt;
.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

  1. react引入useState
  2. useState:当前state(count),以及用于更新它的函数(setCount)
  3. 需要更改时候,调用更新函数,将新的值传递给它
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进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注