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 相关文章推荐
通过JS获取用户本地图片路径并显示的代码
Feb 16 Javascript
jQuery回车实现登录简单实现
Aug 20 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
May 15 Javascript
被遗忘的javascript的slice() 方法
Apr 20 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
Aug 13 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
Apr 14 Javascript
JS实现控制文本框的内容
Jul 10 Javascript
JavaScript递归算法生成树形菜单
Aug 15 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
Aug 25 Javascript
详解webpack模块加载器兼打包工具
Sep 11 Javascript
vue实现日历备忘录功能
Sep 24 Javascript
JavaScript冒泡算法原理与实现方法深入理解
Jun 04 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
Laravel相关的一些故障解决
2020/08/19 PHP
JavaScript TO HTML 转换
2006/06/26 Javascript
比较全的JS checkbox全选、取消全选、删除功能代码
2008/12/19 Javascript
火狐4、谷歌12不支持Jquery Validator的解决方法分享
2011/06/20 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2013/08/12 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
2015/09/15 Javascript
浅谈JS原生Ajax,GET和POST
2016/06/08 Javascript
不使用script导入js文件的几种方法
2016/10/27 Javascript
分类解析jQuery选择器
2016/11/23 Javascript
分享ES6的7个实用技巧
2018/01/18 Javascript
用p5.js制作烟花特效的示例代码
2018/03/21 Javascript
微信小程序带动画弹窗组件使用方法详解
2018/11/27 Javascript
微信小程序分享海报生成的实现方法
2018/12/10 Javascript
浅谈一个webpack构建速度优化误区
2019/06/24 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
2019/08/01 Javascript
浅谈layui 数据表格前后台传值的问题
2019/09/12 Javascript
javascript实现计算器功能
2020/03/30 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
2020/08/20 Javascript
Vue项目打包部署到apache服务器的方法步骤
2021/02/01 Vue.js
Python+matplotlib实现华丽的文本框演示代码
2018/01/22 Python
Python实现读写INI配置文件的方法示例
2018/06/09 Python
python pandas 对时间序列文件处理的实例
2018/06/22 Python
Python类装饰器实现方法详解
2018/12/21 Python
python消费kafka数据批量插入到es的方法
2018/12/27 Python
python中实现控制小数点位数的方法
2019/01/24 Python
pytorch sampler对数据进行采样的实现
2019/12/31 Python
使用Python防止SQL注入攻击的实现示例
2020/05/21 Python
pyecharts在数据可视化中的应用详解
2020/06/08 Python
python 调整图片亮度的示例
2020/12/03 Python
美国零售商店:Blue&Cream
2017/04/07 全球购物
梅西酒窖:Macy’s Wine Cellar
2018/01/07 全球购物
缓刑人员的思想汇报
2014/01/11 职场文书
村庄绿化方案
2014/05/07 职场文书
Nginx代理同域名前后端分离项目的完整步骤
2021/03/31 Servers
pytorch显存一直变大的解决方案
2021/04/08 Python
Nginx速查手册及常见问题
2022/04/07 Servers