010-JSX表达式

React中的JSX

在react中使用JSX来代替常规的JS，像XML的JS语法拓展。
通过React.createElement调用。

使用JSX

// 1、JS表达式
// a1、标签属性
render () {
	var flag = true;
	return (
		<input type='button' value='默认按钮' disabled={flag} />
	)
}
// a2、innerHTML
<p>用户姓名：{ this.state.userName } </p>
// a3、三元运算表达式
<p className={flag ? 'mute' : 'nomute'}>{userName=== '' ? '游客_' : userName }</p>
// 2、注释写法
{/* 注释写法*/}
// 3、样式
render () {
	var style = { 
		fontSize: 16// 元素数字自动添加px为单位
	}
	return (
		<div style={style}></div>
	}
}
// 4、数组
var arr = [
	<p>p1第一段文字！</p>
	<p>p2第二段文字！</p>
];
render () {
	return (
		<div>{ arr }</div>
	)
}

JSX特点

1、类XML语法容易接受
2、增强JS语义
3、结构清晰
4、抽象程度高
5、代码模块
JSX的一个突出于JS不同的地方是：JSX里面可以直接编写html标签。

JSX原理可以参考外部内容:https://mp.weixin.qq.com/s?__biz=MjM5MTA1MjAxMQ==&mid=2651229767&idx=1&sn=8f06283e43cfcda722189b56644f4dfc&chksm=bd4957c38a3eded58cd388130c4f303ff4033213ffcf157698d50f1ebfe87788a7f74d8be76a&scene=0#rd