React学习之JSX与react事件实例分析


Posted in Javascript onJanuary 06, 2020

本文实例讲述了React学习之JSX与react事件。分享给大家供大家参考,具体如下:

1、JSX

1.1、表达式

在React中使用JSX来描述HTML页面,而且可以与js混合使用,使用JavaScript表达式时要将表达式包含在大括号里

const user = {
 firstName: 'Harper',
 lastName: 'Perez'
};
const element = (    //将JSX语句保存在变量中
 <h1>
  Hello, {formatName(user)}!  {/* {}中写js语句*/}
 </h1>
);

在编译之后呢,JSX 其实会被转化为普通的 JavaScript 对象,可以对其赋值或把它当作参数传递:

ReactDOM.render(
 element,        //通过JSX变量渲染react节点
 document.getElementById('root')
);

1.2、属性

JSX中可以像HTML中一样使用"字符串"的属性,也可以使用{表达式}属性:

const element = <div tabIndex="0"></div>;
const element = <img src={user.avatarUrl}></img>;

注意:

1、React DOM 使用 camelCase 小驼峰命名 来定义属性的名称,而不是使用 HTML 的属性名称。例如font-size要改为fontSize。

2、HTML中的保留字不能用于js中,例如class,应改为className:

const ele= <div className="red">Red Color</div>

3、JSX中行内样式style需要用一个对象返回,而不是字符串:

const ele=<div style="color:red">Red</div>     //会报错
const ele= <div style={{color:'red'}}>Red</div>

{{color:red}}中第一个大括号代表这是一个js表达式,第二个代表这是一个用大括号引起的对象

1.3、嵌套

如果 JSX 标签是闭合式的,那么需要在结尾处用 />:

const element = <img src={user.avatarUrl} />;

jJSX内含多个标签时,返回时需要在最外面用一个div把它们包起来:

const element = (
 <div>
  <h1>Hello!</h1>
  <h2>Good to see you here.</h2>
 </div>
);

1.4、注释

在jsx中的注释要单独占一行,且用大括号包起来,例如:{/*注释*/},否则有可能会被当成普通文本,引起错误。

2、事件

react事件的绑定采用驼峰写法onClick={this.function}

例如定义一个切换ON/OFF的函数shiftFlag:

class Toggole extends React.Component{
 constructor(props){
  super(props);
  this.state={
   flag:true
  };
  this.shiftFlag=this.shiftFlag.bind(this);   //函数shiftFlag绑定this
 }
 shiftFlag(e){
  e.preventDefault();
  this.setState({
   flag:!this.state.flag
  });
 }
 render(){
  return <a href="#" rel="external nofollow" onClick={this.shiftFlag}>{this.state.flag?'ON':'OFF'}</a>
 }
}

注:

1、类的方法默认是不会绑定this的,直接在方法shiftFlag中使用this会报错this is undefined,因此需要为shiftFlag绑定this。

2、e是一个事件参数,使用e.preventDefault()方法来阻止a标签的默认跳转行为。

react事件参数的传递通过绑定来实现,在传递时,绑定的this在前,参数在后。在定义函数时,事件对象e要放在最后,例如定义一个setName函数修改name为传入的参数:

class Name extends React.Component{
 constructor(props){
  super(props);
  this.state={
   name:'default'
  }
 }
 setName(name,e){   //事件e放在最后
  this.setState({
   name:name
  })
 }
 render(){
  return <button onClick={this.setName.bind(this,'tory')}>{this.state.name}</button>
 }
}

希望本文所述对大家React程序设计有所帮助。

Javascript 相关文章推荐
URI、URL和URN之间的区别与联系
Dec 20 Javascript
JavaScript 读取元素的CSS信息的代码
Feb 07 Javascript
简介JavaScript中的sub()方法的使用
Jun 08 Javascript
jQuery Mobile动态刷新页面样式的实现方法
May 28 Javascript
JS常用字符串方法(推荐)
Jan 15 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
Jan 08 Javascript
解决webpack -p压缩打包react报语法错误的方法
Jul 03 Javascript
Angular4编程之表单响应功能示例
Dec 13 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
Nov 08 Javascript
微信小程序云开发之使用云数据库
May 17 Javascript
JS+CSS实现随机点名(实例代码)
Nov 04 Javascript
vue+iview使用树形控件的具体使用
Nov 02 Javascript
vue学习之Vue-Router用法实例分析
Jan 06 #Javascript
借助云开发实现小程序短信验证码的发送
Jan 06 #Javascript
React学习之受控组件与数据共享实例分析
Jan 06 #Javascript
Node.js创建一个Express服务的方法详解
Jan 06 #Javascript
JS正则表达式验证端口范围(0-65535)
Jan 06 #Javascript
基于jQuery实现挂号平台首页源码
Jan 06 #jQuery
JS实现音乐导航特效
Jan 06 #Javascript
You might like
将文件夹压缩成zip文件的php代码
2009/12/14 PHP
解析isset与is_null的区别
2013/08/09 PHP
laravel5 Eloquent 实现事务方式
2019/10/21 PHP
文本链接逐个出现的js脚本
2007/12/12 Javascript
javascript 贪吃蛇实现代码
2008/11/22 Javascript
Javascript Jquery 遍历Json的实现代码
2010/03/31 Javascript
js自定义事件及事件交互原理概述(一)
2013/02/01 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
2013/04/12 Javascript
js特殊字符过滤的示例代码
2014/03/05 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
2015/08/07 Javascript
js替换字符串中所有指定的字符(实现代码)
2016/08/17 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
2017/04/07 Javascript
Vue.js对象转换实例
2017/06/07 Javascript
原JS实现banner图的常用功能
2017/06/12 Javascript
react 国际化的实现代码示例
2018/09/14 Javascript
微信小程序实现简易table表格
2020/06/19 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
2019/11/26 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
2020/04/09 Javascript
[54:24]Optic vs TNC 2018国际邀请赛小组赛BO2 第二场
2018/08/18 DOTA
[05:46]2018完美盛典-《同梦共竞》
2018/12/17 DOTA
python基于windows平台锁定键盘输入的方法
2015/03/05 Python
python检查字符串是否是正确ISBN的方法
2015/07/11 Python
浅谈Django REST Framework限速
2017/12/12 Python
Python实现将MySQL数据库表中的数据导出生成csv格式文件的方法
2018/01/11 Python
docker-py 用Python调用Docker接口的方法
2019/08/30 Python
Python列表删除元素del、pop()和remove()的区别小结
2019/09/11 Python
python dumps和loads区别详解
2020/02/04 Python
用HTML5实现网站在windows8中贴靠的方法
2013/04/21 HTML / CSS
美国玛丽莎收藏奢华时尚商店:Marissa Collections
2016/11/21 全球购物
简约控的天堂:The Undone
2016/12/21 全球购物
函授本科毕业自我鉴定
2013/10/09 职场文书
应届生法律顾问求职信
2013/11/19 职场文书
中学生打架检讨书
2014/10/13 职场文书
怎么禁用Windows 11快照布局? win11不使用快照布局的技巧
2021/11/21 数码科技
python缺失值填充方法示例代码
2022/12/24 Python