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跨域获得Json时invalid label错误的解决办法
Jan 11 Javascript
js将控件隐藏及display属性的使用介绍
Dec 30 Javascript
jquery实现图片按比例缩放示例
Jul 01 Javascript
js实现Select列表各项上移和下移的方法
Aug 14 Javascript
使用JQuery实现的分页插件分享
Nov 05 Javascript
jquery对复选框(checkbox)的操作汇总
Jan 13 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
May 10 Javascript
angular的输入和输出的使用方法
Sep 22 Javascript
详解ES6中的 Set Map 数据结构学习总结
Nov 06 Javascript
ES6基础之解构赋值(destructuring assignment)
Feb 21 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
Sep 11 Javascript
Vue使用Proxy代理后仍无法生效的解决
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
基于xcache的配置与使用详解
2013/06/18 PHP
php通过asort()给关联数组按照值排序的方法
2015/03/18 PHP
微信公众平台开发(五) 天气预报功能开发
2016/12/03 PHP
PHP判断一个变量是否为整数、正整数的方法示例
2019/09/11 PHP
建议大家看下JavaScript重要知识更新
2007/07/08 Javascript
可自己添加html的伪弹出框实现代码
2013/09/08 Javascript
jquery简单实现网页层的展开与收缩效果
2015/08/07 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
2015/10/24 Javascript
JavaScript设计模式开发中组合模式的使用教程
2016/05/18 Javascript
js实现多图左右切换功能
2016/08/04 Javascript
jquery遍历标签中自定义的属性方法
2016/09/17 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
2016/11/23 Javascript
BootStrap树状图显示功能
2016/11/24 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
2016/11/25 Javascript
jQuery内容筛选选择器实例代码
2017/02/06 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
2017/03/23 jQuery
javascript简单链式调用案例分析
2017/05/10 Javascript
vee-validate vue 2.0自定义表单验证的实例
2018/08/28 Javascript
微信小程序实现圆形进度条动画
2020/11/18 Javascript
react实现antd线上主题动态切换功能
2019/08/12 Javascript
JavaScript鼠标悬停事件用法解析
2020/05/15 Javascript
微信小程序自定义扫码功能界面的实现代码
2020/07/02 Javascript
vue实现移动端input上传视频、音频
2020/08/18 Javascript
[43:24]VG vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[01:04:14]VP vs TNC 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python查找第k小元素代码分享
2013/12/18 Python
python实现linux服务器批量修改密码并生成execl
2014/04/22 Python
python开启多个子进程并行运行的方法
2015/04/18 Python
在Python中使用第三方模块的教程
2015/04/27 Python
Python处理文本文件中控制字符的方法
2017/02/07 Python
完美解决Python matplotlib绘图时汉字显示不正常的问题
2019/01/29 Python
Windows10下 python3.7 安装 facenet的教程
2019/09/10 Python
英国第一豪华护肤品牌:Elemis
2017/10/12 全球购物
公司应聘自荐书
2014/06/14 职场文书
初中地理教学反思
2016/02/19 职场文书
Spring整合Mybatis的全过程
2021/06/28 Java/Android