React中JSX与react事件的示例分析

小编给大家分享一下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

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'} } }

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中JSX与react事件的示例分析

1、JSX

1.1、表达式

Hello, {formatName(user)}! {/* {}中写js语句*/}

1.2、属性

1.3、嵌套

Hello!

Good to see you here.

1.4、注释

2、事件

其他资讯