初识React(2)：什么是JSX？

endless_road 发布于2019-08-26 12:14 / 1999人阅读

摘要：前言在中，我们的页面内容就是通过来编写，那么到底是什么呢其实就是对象，会构建创建一个对象来描述结构的信息。这里要记住是的一种扩展语言，类似但是又不是，因为中还能进行运算，判断，加入一些语言等。

前言

在react中，我们的页面内容就是通过JSX来编写，那么JSX到底是什么呢？JSX其实就是JavaScript对象，会构建创建一个js对象来描述HTML结构的信息。这里要记住JSX是js的一种扩展语言，类似HTML但是又不是HTML，因为JSX中还能进行运算，判断，加入一些js语言等。

JSX中的运算

   render() {
      return(
        
           算数题
           
             5+6={5+6}
             6+6={6+6}
             10*10={10*10}
           
        
      )
    }

在JSX中是用 {} 来区分是HTML还是js的，也就是说，所有的js语言都得用 {} 括起来

JSX中的变量

 render() {
      const flag = true;
      return(
        
            {flag ? (flag为真
) : (flag为假)}
        
      )
    }

JSX中的样式

在JSX中,给元素添加样式也是用style属性，但是style里面放的是一个样式对象，如下所示：

 render() {
      var newStyle = {
        background: "blue",
        fontSize:"15px"
      }
      return(
        
            颜色
            样式
        
      )
    }

通过上述案例，我们可以知道JSX中，样式的属性名称得用驼峰命名

JSX中的HTML标签

在JSX中，有些标签名称为了防止冲突得做一些转换：

class得用className代替

lable元素中的for属性，得用htmlFor代替，如下：

这里还要注意，JSX中的所有标签必须得是闭标签

云服务器私有云 2物联网是什么 docker初识 269云服务器是什么意思初识关系数据库

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108303.html

react开发教程（－）初识

摘要：定义一个组件可以在其他组件中调用这个组件调用组件刘宇组件插入内容在上面的案例中可以看到吧写到当中，这种写法称为。 React初识 React是Facebook推出的一个javascript库(用来创建用户界面的Javascript库)，所以他只是和用户的界面打交道，你可以把它看成MVC中的V(视图)这一层。组件 React的一切都是基于组件的。web世界的构成是基于各种HTML标签的...

Allen 2019-08-21 15:36 评论0 收藏0
React系列---React（一）初识React

摘要：系列一初识系列二组件的和系列三组件的生命周期是推出的一个库，它的口号就是用来创建用户界面的库，所以它只是和用户界面打交道，可以把它看成中的视图层。系列一初识系列二组件的和系列三组件的生命周期 React系列---React（一）初识ReactReact系列---React（二）组件的prop和stateReact系列---React（三）组件的生命周期 showImg(https://...

lanffy 2019-08-20 17:27 评论0 收藏0
初识React

摘要：初识依稀记得那年参加线下活动，第一次听说这个词语，当时的主讲人是郭达峰，他播放了一个关于及的性能对比视频。合成事件会以事件委托的方式绑定到组件最上层，并且在组件卸载的时候自动销毁绑定的事件。初识React 依稀记得2015那年参加线下活动，第一次听说React这个词语，当时的主讲人是郭达峰，他播放了一个关于ember、angular及react的性能对比视频： React.js Co...

kuangcaibao 2019-08-21 14:47 评论0 收藏0
初识React(3)：组件

摘要：创建组件创建组件之前要注意以下几点组件创建的名称首字母得大写组件中返回的只能是一个根节点，所有的内容得用一个元素都框起来无状态函数式组件无状态函数式组件可以理解成就是一个函数生成的，使得代码的可读性更好，并且精简便利，减少了冗余，无状态组件创建组件创建组件之前要注意以下几点：组件创建的名称首字母得大写组件中返回的JSX只能是一个根节点，所有的内容得用一个元素都框起来 1.无...

FullStackDeveloper 2019-08-26 12:19 评论0 收藏0