XML 基本语法
定义标签时，只允许被一个标签包裹。标签一定要闭合
元素类型
DOM 元素和组件元素。React中的我们的重点是组件，对应规则是 HTML 标签首字母是否为小写字母，其中小写首字母对应 DOM 元素，而组件元素自然对应大写首字母。
JSX 还可以通过命名空间的方式使用组件元素，以解决组件相同名称冲突的问题，或是对一组组件进行归类。其实就好像不同对象中的同名方法一个道理。
注释
在 HTML 中，注释写成 <!-- content --> 这样的形式，但在 JSX 中并没有定义注释的转换方法，所以这种方式不能使用了。事实上，JSX 还是 JavaScript，依然可以用简单的方法使用注释，唯一要注意的是，在一个组件的子元素位置使用注释要用{}包起来。
function Welcome(props) {
return <button className="btn btn-blue">
/*Test comment*/
<em>{props.name}</em>
</button>
}
我们需要更改如下：
function Welcome(props) {
return <button className="btn btn-blue">
{/*Test comment*/}
<em /*Test comment */>{props.name}</em>
</button>
}在标签中注释仍然可以使用/**/，例如em元素中的注释
这里在去扩展到条件注释，判断浏览器版本的数注释，就不能像以前那样使用。
<!--[if IE]>
<p>Work in IE browser</p>
<![endif]-->
这样的话使用 JavaScript 判断浏览器版本来替代：
{
(!!window.ActiveXObject || 'ActiveXObject' in window) ?
<p>Work in IE browser</p> : ''
}
元素属性
在 JSX 中，不论是 DOM 元素还是组件元素，它们都有属性。
DOM 元素的属性是标准规范属性，但有两个例外—— class 和 for ，这是因为在 JavaScript 中这两个单词都是关键词。因此，我们这么转换：
- class 属性改为 className
- for 属性改为 htmlFor
<div className='class'>
<label htmlFor='name'></label>
</div>渲染如下：
组件元素中的属性则是自定义的属性，用于传入的props中的属性。
const Header = (props) => (
<h3 title={props.title}>{props.text}</h3>
);
class App extends Component {
render() {
return (
<Header title="Sara" text="hello!"/>
);
}
}也可以如下：
const Header = ({title, text}) => (
<h3 title={title}>{text}</h3>
);
class App extends Component {
render() {
return (
<Header title="Sara" text="hello!"/>
);
}
}Boolean属性
省略 Boolean 属性值会导致 JSX 认为 bool 值设为了 true 。要传 false 时，必须使用属性表达式。这常用于表单元素中，比如 disabled 、 required 、 checked 和 readOnly 等。例如， <Checkbox checked={true} /> 可以简写为 <Checkbox checked /> ，反之 <Checkbox checked={false} /> 就可以省略 checked 属性。
class Checkbox extends Component {
render() {
return (
<input type="checkbox" checked={this.props.checked}/>
);
}
}
Checkbox.propTypes = {
checked: PropTypes.bool
}
class App extends Component {
render() {
return (
<Checkbox checked/>
);
}
}如图，默认值为true
展开属性
const data = { name: 'foo', value: 'bar' };
const component = <Component name={data.name} value={data.value} />;可以写成
const data = { name: 'foo', value: 'bar' };
const component = <Component {...data} />;我们可以使用如下将当前组建的属性传入到子组件中去。
const component = <Component {...props} />;自定义 HTML
如果在 JSX 中往 DOM 元素中传入自定义属性，React 是不会渲染的：
<div d="xxx">content</div>如果要使用 HTML 自定义属性，要使用 data- 前缀，这与 HTML 标准也是一致的：
<div data-attr="xxx">content</div>然而，在自定义标签中任意的属性都是被支持的：
<x-my-component custom-attr="foo" />
以 aria- 开头的网络无障碍属性同样可以正常使用：
<div aria-hidden={true}></div>
<input data-customerproperty1="proprtty1" property2='property2' aria-property3="property3" type="checkbox" checked={this.props.checked}/>
Javascript属性表达式
属性值要使用表达式，只要用 {} 替换 "" 即可：
// 输入（JSX）：
const person = <Person name={window.isLoggedIn ? window.name : ''} />;// 输出（JavaScript）：
const person = React.createElement(
Person,
{name: window.isLoggedIn ? window.name : ''}
);
59
