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 相关文章推荐
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
Jul 24 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
Sep 02 Javascript
javascript延时加载之defer测试
Dec 28 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
Apr 07 Javascript
jquery.validate提示错误信息位置方法
Jan 22 Javascript
js css实现垂直方向自适应的三角提示菜单
Jun 26 Javascript
jQuery实现按比例缩放图片的方法
Apr 29 jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
Cocos2d实现刮刮卡效果
Dec 20 Javascript
微信小程序实现简易table表格
Jun 19 Javascript
完美解决通过IP地址访问VUE项目的问题
Jul 18 Javascript
原生JavaScript实现进度条
Feb 19 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
如何使用Strace调试工具
2013/06/03 PHP
zend framework中使用memcache的方法
2016/03/04 PHP
PHP实现判断数组是一维、二维或几维的方法
2017/02/06 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
[Web]防止用户复制页面内容和另存页面的方法
2009/02/06 Javascript
IE 上下滚动展示模仿Marquee机制
2009/12/20 Javascript
js nextSibling属性和previousSibling属性概述及使用注意
2013/02/16 Javascript
Js base64 加密解密介绍
2013/10/11 Javascript
javascript右下角弹层及自动隐藏(自己编写)
2013/11/20 Javascript
深入理解JS中的变量及作用域、undefined与null
2014/03/04 Javascript
node.js超时timeout详解
2014/11/26 Javascript
javascript日期格式化方法汇总
2015/10/04 Javascript
JavaScript html5 canvas绘制时钟效果(二)
2016/03/27 Javascript
JS+CSS实现闪烁字体效果代码
2016/04/05 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
2016/08/25 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
2017/05/26 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
2017/12/20 Javascript
Vue页面跳转动画效果的实现方法
2018/09/23 Javascript
vue环形进度条组件实例应用
2018/10/10 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
2019/04/04 Javascript
Nodejs实现WebSocket代码实例
2020/05/19 NodeJs
Python网站验证码识别
2016/01/25 Python
浅谈python抛出异常、自定义异常, 传递异常
2016/06/20 Python
Python实现FTP上传文件或文件夹实例(递归)
2017/01/16 Python
Python实现图片滑动式验证识别方法
2017/11/09 Python
Python Learning 列表的更多操作及示例代码
2018/08/22 Python
python sitk.show()与imageJ结合使用常见的问题
2020/04/20 Python
详解python定时简单爬取网页新闻存入数据库并发送邮件
2020/11/27 Python
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
2013/01/30 HTML / CSS
Crocs美国官方网站:卡骆驰洞洞鞋
2017/08/04 全球购物
项目管理计划书
2014/01/09 职场文书
2016春节慰问信范文
2015/03/25 职场文书
主婚人致辞精选
2015/07/28 职场文书
Django实现聊天机器人
2021/05/31 Python
浅析MySQL如何实现事务隔离
2021/06/26 MySQL
windows系统安装配置nginx环境
2022/06/28 Servers