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

前端  /  管理员 发布于 5年前   238

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

1、JSX

1.1、表达式

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

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

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

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

1.2、属性

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

const element = 
;const element = ;

注意：

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

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

const ele= 
Red Color

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

const ele=
Red     //会报错const ele= 
Red

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

1.3、嵌套

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

const element = ;

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

const element = (   
Hello!
  
Good to see you here.
 );

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 {this.state.flag?'ON':'OFF'} }}

注：

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 {this.state.name} }}

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

您可能感兴趣的文章:

• JavaScript的React框架中的JSX语法学习入门教程
• React学习之事件绑定的几种方法对比
• 在React中如何优雅的处理事件响应详解
• React.Js添加与删除onScroll事件的方法详解
• 详解react关于事件绑定this的四种方式
• React组件内事件传参实现tab切换的示例代码
• React中阻止事件冒泡的问题详析
• 通过实例学习React中事件节流防抖
• React+Antd+Redux实现待办事件的方法
• React学习笔记之事件处理（二）
• React事件处理的机制及原理