200305&jsx常用语法

jsx常用语法

汇总下jsx中常用的一些基础知识

内容梗概

• 1 概要介绍
• 2 和html的不同之处
• 3 使用方式
• 4 常用语法
  • 4.1 遍历数据
  • 4.2 显示隐藏数据
  • 4.3 自定义控制className
  • 4.4 style声明行内样式
  • 4.5 注释语法
  • 4.6 代码优化
• 5 注意事项
• 6 参考
• 7 行动计划

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开发中常见错误汇总