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 相关文章推荐
基于jquery的一个OutlookBar类,动态创建导航条
Nov 19 Javascript
浅谈关于JavaScript的语言特性分析
Apr 11 Javascript
原生js和jquery中有关透明度设置的相关问题
Jan 08 Javascript
捕获和分析JavaScript Error的方法
Mar 25 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
Oct 28 Javascript
在JavaScript中模拟类(class)及类的继承关系
May 20 Javascript
Bootstrap基本插件学习笔记之按钮(21)
Dec 08 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
Apr 06 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
Apr 04 Javascript
vue中axios的二次封装实例讲解
Oct 14 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
Oct 30 Javascript
微信小程序获取当前位置和城市名
Nov 13 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
Yii框架ACF(accessController)简单权限控制操作示例
2019/04/26 PHP
浅析Javascript使用include/require
2013/11/13 Javascript
关于js中for in的缺陷浅析
2013/12/02 Javascript
基于jquery实现的可编辑下拉框实现代码
2014/08/02 Javascript
js模仿php中strtotime()与date()函数实现方法
2015/08/11 Javascript
js实现向右横向滑出的二级菜单效果
2015/08/27 Javascript
js实现图片无缝滚动特效
2020/03/19 Javascript
jQuery拖拽通过八个点改变div大小
2020/11/29 Javascript
JavaScript使用ZeroClipboard操作剪切板
2017/05/10 Javascript
vue实现移动端图片裁剪上传功能
2020/08/18 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
2018/04/17 Javascript
详解从NodeJS搭建中间层再谈前后端分离
2018/11/13 NodeJs
基于layui的下拉列表的数据回显方法
2019/09/24 Javascript
jQuery实现轮播图源码
2019/10/23 jQuery
如何正确理解vue中的key详解
2019/11/02 Javascript
jQuery-App输入框实现实时搜索
2020/11/19 jQuery
python中getattr函数使用方法 getattr实现工厂模式
2014/01/20 Python
举例讲解Python的Tornado框架实现数据可视化的教程
2015/05/02 Python
python实现批量监控网站
2016/09/09 Python
Python中单、双下划线的区别总结
2017/12/01 Python
PyQt5每天必学之事件与信号
2018/04/20 Python
导致python中import错误的原因是什么
2020/07/01 Python
CSS3中的元素过渡属性transition示例详解
2016/11/30 HTML / CSS
css3 transform属性详解
2014/09/30 HTML / CSS
限量版运动鞋和街头服饰:TheDrop
2020/09/06 全球购物
经济系大学生求职信
2013/10/01 职场文书
资产经营总监岗位职责
2013/12/04 职场文书
师范教师大学生职业生涯规划范文
2014/01/05 职场文书
信息专业毕业生五年职业规划参考
2014/02/06 职场文书
2014年度安全工作总结
2014/12/04 职场文书
大学生求职信怎么写
2015/03/19 职场文书
医院党建工作总结2015
2015/05/26 职场文书
2015大学生暑假调查报告
2015/07/13 职场文书
2016年春季趣味运动会开幕词
2016/03/04 职场文书
创业不要错过,这4种餐饮新模式
2019/07/18 职场文书
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js