前端之jsx-1小时搞清楚

JSX

• JSX(JavaScript XML)是js内定义的一套XML语法，可以解析出目标js代码,颠覆传统js写法。实质上HTML也是xml协议，有由浏览器解析，而JSX是由js解析。当然也可以通过构建工具先解析生成，如webpack（使用babel-loader），这样可以减少代码这行中js解析JSX的时间。JSX原本是使用reactjs官方自己提供的方法处理，2015-7-12日官方博客文章声明其自身用于JSX语法解析的编译器JSXTransform已经过期，不再维护，ReactJS和React Native已经全部采用第三方Babel的JSX编译器实现。

上面代码体现了 JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。不是什么JavaScript语法都可以用的，像if语句就不可以用，下面列举一些用法。其实会用最基本的用法就够了，其他的了解下。

//在JSX中使用变量
var name = "test";
<div>{name + "666"}</div>
//在JSX中使用Array（特殊的变量）
var arr = [
  <h1>Hello world!</h1>,
  <h2>React is awesome</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);
//在JSX中使用函数
var names = ['Alice', 'Emily', 'Kate'];
<div>
    { 
        names.map(function (name) { 
            return <div>Hello, {name}!</div>
        }) 
    }
</div>
//条件判断-使用三目运算符
<div className={this.state.isComplete ? 'is-complete' : ''}></div>
//条件判断-使用&&运算符
<div className={this.state.isComplete && 'is-complete'}></div>

//在JSX中使用...操作符
var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} />;
var component = <Component {...props} foo="override"/>;

//使用变量属性
var id = this.props.id;
function getId(){
    return "test";
}
<div id={id} ></div>//变量
<div id={this.getId()} ></div>//函数也可以

//className
//在js中写css属性当然要遵守语法，就像写js对象一样。
<div className="test"></div>
//绑定事件 事件要使用驼峰式写法。
var add =  funtion(){}
<div className="test" onClick={add} style={style}></div>
//sytle的css属性
//在js中写css属性当然要遵守语法，就像写js对象一样。
var style= {
    fontSize: 13,
    bold: normal,
}
<div style={style}> </div>
//JSX陷阱
// 错误: 会显示 “First &middot; Second”
<div>{'First &middot; Second'}</div>
<div>{'First \u00b7 Second'}</div>
<div>{'First ' + String.fromCharCode(183) + ' Second'}</div>
//可以在数组里混合使用字符串和 JSX 元素。
<div>{['First ', <span>&middot;</span>, ' Second']}</div>
//万不得已，可以直接插入原始HTML。
<div dangerouslySetInnerHTML={{__html: 'First &middot; Second'}} />

//自定义 HTML 属性
//如果往原生 HTML 元素里传入 HTML 规范里不存在的属性，React 不会显示它们。如果需要使用自定义属性，要加 data- 前缀。
<div data-custom-attribute="foo" />
//然而，在自定义元素中任意的属性都是被支持的 （那些在tag名里带有连接符或者 is="..." 属性的）
<x-my-component custom-attribute="foo" />
//以 aria- 开头的 网络无障碍 属性可以正常使用。
<div aria-hidden={true} />

非DOM属性

下面的特殊属性是JSX中存在，后续的组件一些特殊属性会详细说明。

• key
• ref
• dangerouslySetlnnerHTML