首页 > 其他分享 >Reactjs学习-JSX语法

Reactjs学习-JSX语法

时间:2023-07-18 18:12:07浏览次数:37  
标签:Reactjs 语法 state html 组件 div JSX

本篇是关于React的基础-JSX语法

  • 什么是JSX
    在js文件中写html, 这样的语法就是JSX

 

  • 如何书写
    跟html写法一致,注意,首字母大写的标签是组件,首字母小写的,例如 div是html元素

 

  • 有哪些注意事项

    1. 在类组件中写注释,用花括号包起来



    2. style中的某个属性需要用state中的值,  用模板字符串来和state一起写



 3. className需要用到state中的某个值来判断,  可以这么写



 4.state的值是一个数组,渲染的时候可以用map




 5.在函数组件中 返回多个元素的时候,最外层需要用一个div 或者 React.Fragment 包起来

    类组件的render函数也有这种要求


return返回了三个div,所以最外层要用一个div把这三个div包起来

 

 

 

标签:Reactjs,语法,state,html,组件,div,JSX
From: https://www.cnblogs.com/pandacat5/p/17563790.html

相关文章

  • Java基本语法
    Java基本语法注释1单行注释2多行注释3文档注释//输出一个Helloworld单行注释/**多行注释**//***文档注释*@DescriptionHelloWorld*@AuthorDunCan*/标识符-Java所有的组成部分都需要名字。###标识符注意点1所有......
  • Reactjs学习-State
    本篇是关于React的基础-State在哪儿定义react在Constructor函数中定义state,如下 如何绑定使用JSX语法中,想使用刚才定义的state,需要用花括号包起来例如 如何修改state需要绑定事件,React提供setState函数来做这个操作this.setState({state名:值})注意:......
  • 新手学c#常用到的语法记录
    ​C#是一种面向对象的编程语言。在面向对象的程序设计方法中,程序由各种相互交互的对象组成。相同种类的对象通常具有相同的类型,或者说,是在相同的class中。例如,以Rectangle(矩形)对象为例。它具有length和width属性。根据设计,它可能需要接受这些属性值、计算面积和显示细节......
  • python:基础语法(002)
    python的关键字:#打印python都有哪些关键字importkeywordprint(keyword.kwlist) 缩进:缩进快捷键Tab 多行语句:按回车键即可换行,用\反斜杠也可以换行 python的引号:python中可以使用单引号、双引号、三引号#单引号print('你好')#双引号print("你好")#三引......
  • React(二):JSX
    一、什么是JSXJSX是一种将HTML和JavaScript结合的语法扩展,它允许在JavaScript代码中直接编写HTML标记。上一节在学习元素渲染的时候就已经使用过JSX语法来进行元素的定义:constelement=<h1>HelloReact</h1>;如上述语句所示,既不是字符串,又不是Html,而且直接在javascript中......
  • Reactjs学习笔记
    本篇是关于React的简介ReactJS是Facebook推出的一款前端框架,2013年开源,提供了一种函数式编程思想,拥有比较健全的文档和完善的社区,在React16的版本中对算法进行了革新,称之为ReactFiber。开发环境搭建需要nodeJS解析器,以及npm(node的包管理工具)如何引用React1.使用.js来引入......
  • 【11.0】Ajax之基本语法
    【一】前后端传输数据的编码格式(contentType)主要研究POST请求数据的编码格式因为GET请求数据就是直接放在url后面的可以朝后端发送post请求的方式form请求ajax请求【1】form表单前后端传输数据的格式urlencodedformdatajson【2】编码格式form表......
  • 【技术积累】JavaScript中的基础语法【三】
    JavaScript的条件结构JavaScript中的条件结构主要包括if语句、if-else语句、if-elseif语句和switch语句。这些条件结构用于根据不同的条件执行不同的代码块。if语句if语句用于在满足条件时执行一段代码块。语法如下:if(condition){//codetobeexecutedifconditioni......
  • 【技术积累】JavaScript中的基础语法【二】
    JavaScript编写方式JavaScript是一种脚本语言,用于为网页添加交互性和动态功能。它可以直接嵌入到HTML中,并通过浏览器解释执行。下面是一些常见的JavaScript编写方式和相应的代码示例:内联方式在HTML文件中直接嵌入JavaScript代码,使用`<script>`标签将代码包裹起来。这种方式适用......
  • SQL语法
    joinLEFTJOIN连接左表中的所有行,即使在右表中找不到匹配的行也显示出来,用NULL值代替。RIGHTJOIN和LEFTJOIN在功能上是等效的,只要表顺序被切换。INNERJOIN中ON条件等同于WHERE子句中的条件。groupbygroupby在where后面,groupby紧跟着having,groupby默认取第1条。like匹......