React中的JSX??{?}的使用_React

来源:脚本之家  责任编辑:小易  
目录
1.在JSX中使用{ }2.在JSX中嵌套标签3.{}中的样式和事件处理4.在JSX中使用语句

在做react开发的时候,我们知道最后要通过render方法来将React元素挂载到真实的DOM上。而创建一个React元素,可以通过两种方式创建。
(1)通过JSX方式
(2)通过React.createElement()方法创建

而JSX的方式,最终也会被babel转换,变成通过React.createElement()方法进行创建。
之所以这样子,是因为JSX能够很大程度的方便开发,可以少写很多代码。

而本篇文章就是讲解一下如何在React中使用JSX。

1.在JSX中使用{ }

例如当我们通过JSX创建一个React元素:

let a = 1
const div = <div></div>

而在这个div中想使用变量a,我们就可以通过{}来对变量进行引入。

(1)引入变量

const div = <div>{a}</div> //变量

当然,除了引入变量这种,还有很多中方式可以在{}中进行编写。

(2)引入对象属性

    let empty = {
      a: 1,
      b: 2
    }
    const div = <div>{empty.a}</div> //对象属性

(3)引入计算表达式

    const div = <div>{empty.a + empty.b}</div> //计算表达式

(4)引入函数

    const fn = ()=>{
      return 2
    }
    const div = <div>{fn()}</div> //函数

(5)引入逻辑表达式

    const div = <div>{fn() === 2 ? 1 : 2}</div> //逻辑表达式

(6)引入数组

    const div = <div>{[1,2,3,4,5]}</div> //数组

OK,除了上面写在大括号里的,还有几种数据类型没有引入。这里需要注意,大括号里虽然可以解析数组,但是不能解析对象(有一种特例后面会说)。

如果在大括号里面放入了对象,那么React就会报错。
同样的,如果在大括号里的是一个方法,也会报错(也有一种特例)。

如果在{}里面,引入了布尔类型,undefined,null这三种数据类型。React虽然不会报错,但是并不会渲染到真实DOM上。

2.在JSX中嵌套标签

在正常的HTML里面,标签是可以任意嵌套的。如果在React中,可以看下面的代码:

    class Em extends React.Component {
      render(){
        return <div></div>
      }
    }

    const div = (<div>
      <Em>
        <p>123</p>
      </Em>
    </div>)

通过上面的方式,是没办法实现出想要的效果的。因为它不符合JSX的使用规范,对于Em组件,是没有收到p标签的,所以也不会对它进行展示。
正确写法如下:

    class Em extends React.Component {
      render(){
        return <div>{this.props.children}</div>
      }
    }

    const div = (<div>
      <Em>
        <p>123</p>
      </Em>
    </div>)

这种方式,主要是通过props.children拿到了P标签,并且在Em组件里面渲染。

说到这里,可以说一下另一个用到{}的地方,当我们给React组件绑定属性的时候,可以通过…的方式:

    let props = { a:1,b:2}
    const div = <div {...props}>123</div>

请记住,这里的{…props}和Es6的解构并不是一回事!

也就是这种写法只能出现在JSX里面,不能在HTML里面这么写。因为在这里babel已经对它进行了处理所以才可以这么写。

3.{}中的样式和事件处理

刚才说{}里面不应该有对象和函数,但是有个别的特例,就是style样式,和事件处理。

在JSX中给标签添加样式是这么写的:

    const div = <div style={{fontSize:'14px',aaa:'2'}}></div>

也就是{}里面的,是该标签的样式对象。值得注意的是里面的key都是用小驼峰命名的。而且必须有效,不然是无法渲染到真实DOM的标签上的。

在JSX中给标签添加事件是这么写的:

    const div = <div onClick={() => {console.log(123)}}>123</div>

同样,事件名也是小驼峰式命名的。

4.在JSX中使用语句

在jsx中是可以通过语句来对React元素进行处理的。例如

条件判断语句:

    let div = [<div>123</div>];
    if(1+1 === 2){
      div.push(<div>true</div>)
    }else{
      div.push(<div>false</div>)
    }

循环语句:

    let div = [1,2,3,4,5].map((item,index) => {
      return <li key={index}>{item}</li>
    })

关于JSX的一些使用就先说这么多,后续有新内容会继续补充。

到此这篇关于React中的JSX  { }的使用的文章就介绍到这了,更多相关React JSX使用内容请搜索真格学网以前的文章或继续浏览下面的相关文章希望大家以后多多支持真格学网!

您可能感兴趣的文章:React报错之组件不能作为JSX组件使用的解决方法React-vscode使用jsx语法的问题及解决方法

  • 本文相关:
  • 深入理解react高阶组件
  • react中使用antd及immutable示例详解
  • react koa rematch 如何打造一套服务端渲染架子
  • 浅谈react中组件间抽象
  • react实现二级联动(左右联动)
  • 详解ant design of react的安装和使用方法
  • 详解react之父子组件传递和其它一些要点
  • 一看就懂的reactjs基础入门教程-精华版
  • react-intl实现react国际化多语言的方法
  • react操作真实dom实现动态吸底部的示例
  • Facebook为什么不让React-native在Windows上也能开发
  • react 页面 参数怎么传递
  • VOCALOID的 ReAct PV的绘师是谁?
  • 前端开发和后端开发有什么区别?
  • reactnative 怎么自定义控件
  • 求央视风云音乐频道,乐现场越快乐中的广告插曲 一个组合,是两...
  • 电影甜心辣舞 Honey中的音乐
  • 《甜心辣舞》的片尾曲叫什么?
  • 怪物公司介绍
  • 李爱民的发表论文
  • 急求高手编程从text文件中提取需要的信息,万谢啦。。。
  • 电影《甜心辣舞》的插曲
  • 甜心热舞里面的所有插曲
  • 求电影《甜心辣舞》里面3分31时候的插曲
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全yui.ext相关prototypejqueryangularjsjsonlib_jsjs面向对象extjsmootoolsseajsdojovue.jsbackbone.jsreact其它首页javascriptjavascript类库reactreact报错之组件不能作为jsx组件使用的解决方法react-vscode使用jsx语法的问题及解决方法深入理解react高阶组件react中使用antd及immutable示例详解react koa rematch 如何打造一套服务端渲染架子浅谈react中组件间抽象react实现二级联动(左右联动)详解ant design of react的安装和使用方法详解react之父子组件传递和其它一些要点一看就懂的reactjs基础入门教程-精华版react-intl实现react国际化多语言的方法react操作真实dom实现动态吸底部的示例详解react中传入组件的props改变时更新组件的几种实现vscode配置react开发环境的步骤react-redux中connect的装饰器用法@connreactnative 之flatlist使用及踩坑封装总结详解react native开源时间日期选择器组件(reacreact native实现简单的登录功能(推荐)react-router browserhistory刷新页reactnative之键盘keyboard的弹出与消失示例详解react-router中url参数改变页面不刷新的解决详解各版本react路由的跳转的方法react从class方式转hooks详解官方推荐react-navigation的具体使用详解react前端dom常见hook封装示例上react-native datepicker日期选择组件的实现代码react中useeffect 与 uselayouteffect的区别react获取input值并提交的2种方法实例react hooks 实现和由来以及解决的问题详解使用react-router4.0实现重定向和404功能的方法详解react、redux、react-redux之间的关系
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved