200305&jsx常用语法
2020-04-22 17:21
866 查看
jsx常用语法
汇总下jsx中常用的一些基础知识
内容梗概
- 1 概要介绍
- 2 和html的不同之处
- 3 使用方式
- 4 常用语法 4.1 遍历数据
- 4.2 显示隐藏数据
- 4.3 自定义控制className
- 4.4 style声明行内样式
- 4.5 注释语法
- 4.6 代码优化
1 概要介绍
- 1.1 jsx是一门服务于react的技术
- 1.2 react不用jsx也没问题,但jsx也是基于组件化思想的,所以react用了jsx会收益更多
- 1.3 jsx 需要 编译后才能在浏览器中运行
- 1.4 jsx 不仅可以用在react,还可以用在vue等其他地方
2 和html的不同之处
- 2.1 样式方面:class vs className
- 2.2 事件方面:onclick vs onClick
- 2.3 form方面:value vs defaultValue
2.1 样式方面
用
className而不是
class,因为在jsx中class被认为是保留字
<p class="description"> //改为这种 <p className="description">
于此相同的还有
htmlfor而不是
for
2.2 事件方面
小驼峰式命名规则
- onclick -> onClick
- onchange -> onChange
- onsubmit -> onSubmit
用
onClick而不是
onclick。
2.3 form方面
jsx中除了value属性,还新增了defaultValue,之前一直以为是antd组件新增的,看了书之后才发现是jsx中新增的。
<textarea>Some text</textare> //改为 <textarea defaultValue={'Some text'} />
<select> <option value="x" selected> ... </option> </select> //改为 <select defaultValue="x"> <option value="x">...</option> </select>
3 使用方式
使用babel编译
4 常用语法
日常开发中常用语法
4.1 遍历数据
//方法1: const elements = ['one', 'two', 'three']; const items = []; for(const [index, value] of elements.entries()) { items.push(<li key={index}>{value}</li>) } return { <div> {items} </div> }
//方法2:或者直接使用map函数 const elements = ['one', 'two', 'three']; return ( <ul> {elements.map((value, index) => { return <li key={index}>{value}</li> })} </ul> )
4.2 显示隐藏数据
三元表达式
{this.state.type === "component1" ? (<Components1 />) : (<Components2 />)
4.3 自定义控制 className
<a className={this.props.className || "goBack"}>返回</a> //或者 <a className={this.props.type === "download" ? "element-show" : "element-hide"} >下载</a>
4.4 style声明行内样式
有2种方法
//方法1 var divStyle = { color: 'white' } ReactDOM.render(<div style={divStyle}>Hello World!</div>, mountNode)
//方法2 ReactDOM.render(<div style={{ color: 'white' }}>Hello World!</div>, mountNode)
4.5 注释语法
<p> { /* 这是一个注释 */ } </p>
4.6 代码优化
- 代码优化 - 属性扩展(es6的扩展操作符)
- 注意: data的属性值要和组件的属性一致才行,比如data.title和title
<div> <BlogPost title={data.title} date={data.date} /> </div> //可以优化为 <div> <BlogPost {...data} /> </div>
<div> <BlogPost title={data.title} date={data.date} name={data.finalName}/> </div> //可以优化为(注意:name属性不能通过扩展操作符增加进去) <div> <BlogPost {...data} name={data.finalName}/> </div>
5 注意事项
- render下只能有1个根节点,因为render函数仅可以返回1个节点。
6 参考
- react-handbook.pdf
7 行动计划
- es6的扩展操作符阅读书籍进行汇总
- babel配置jsx的过程执行及记录总结
- react开发中常见错误汇总
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- 木其工作室代写程序 [原]Oracle常用sql语法
- ORACLE 常用的SQL语法和数据对象
- [置顶] Freemaker FTL指令常用标签及语法
- SQL常用语法大全
- google常用语法
- Shell解析器与脚本,系统、自定义与特殊变量的自我见解与常用语法
- MarkDown常用语法
- 常用数学公式的LaTex语法
- Objective-C语法之常用数据的那些事儿(二)
- div+css的基本 常用到语法(一) 。
- 正则语法及常用正则,Java学习者一定要掌握哟
- 客户端高性能组件化框架React简介、特点、环境搭建及常用语法
- FTL常用标签及语法
- c++中的常用语法
- 正则表达式语法以及常用
- FTL常用标签及语法
- sqlite3常用命令&语法
- sqlite3常用命令&语法
- Makefile的常用语法 及 规则
- hive的常用语法