React学习之JSX与react事件实例分析
本文实例讲述了React学习之JSX与react事件。分享给大家供大家参考,具体如下:
1、JSX
1.1、表达式
在React中使用JSX来描述HTML页面,而且可以与js混合使用,使用JavaScript表达式时要将表达式包含在大括号里
constuser={ firstName:'Harper', lastName:'Perez' }; constelement=(//将JSX语句保存在变量中Hello,{formatName(user)}!{/*{}中写js语句*/}
);
在编译之后呢,JSX其实会被转化为普通的JavaScript对象,可以对其赋值或把它当作参数传递:
ReactDOM.render( element,//通过JSX变量渲染react节点 document.getElementById('root') );
1.2、属性
JSX中可以像HTML中一样使用"字符串"的属性,也可以使用{表达式}属性:
constelement=
注意:
1、ReactDOM使用camelCase小驼峰命名来定义属性的名称,而不是使用HTML的属性名称。例如font-size要改为fontSize。
2、HTML中的保留字不能用于js中,例如class,应改为className:
constele=RedColor
3、JSX中行内样式style需要用一个对象返回,而不是字符串:
constele=Red