1 JSX语法

JSX是javascript的一种扩展，最终会编译成原生的javascript
JSX构建组建的规则和xhtml规则一致
　　标签可以任意嵌套
　　标签必须闭合

---

1.1JSX组件

html原生组件，如

function render() {
  return <h1>Hello World</h1>
}

React组件即自定义组件

class Hello extends React.Component {
  render() {
    return <h1>Hello World</h1>;
  }
}
function render() {
  return <div><Hello/></div>
}

注：
1.自定义组件首字母必须大写，否则解析时按照html原生标签解析，进而报错
2.React组件中必须只能存在一个根节点，不能存在并列根节点，如

function render() {
  // 错误
  return (
    <div></div>
    <div></div>
  )
}

---

1.2 JSX属性

定义属性的方式和html属性的方式一样，不同之处是采用驼峰形式，如

class Hello extends React.component {
  render() {
    return <h1 className="header">Hello World</h1>
  } 
}
function render() {
  return <div><Hello custProp="lalal"/></div>
}

注：
html原生的class样式必须写成className形式，因为JSX语法解析成js原生代码是碰到class会当成关键字处理，运行时报错

---

1.3 JSX处理js

JSX中可以使用{}包裹js的内容，并能够将js内容正确解析

function render() {
  const text="Hello World";
return <h1>{text}</h1>
}

上述代码将解析为<h1>Hello World</h1>

1.4 JSX注释

采用js的注释写法，需要加花括号

function render() {
  return <h1>
    {/*
       注释信息
    */}
  </h1>
}

---

1.5 JSX编译成js

<MyButton type="normal" data={22}>Btn</MyButton>

编译成

React.createElement({
  'MyButton',
  {type: "normal", data: 22},
  'Btn'
})

若为闭合元素，不存在子标签，则React.createElement方法的第三个参数为null

1.6 JSX命名空间（对JSX使用点语法）

若自定义组件中存在多个子组件是，可以采用这种方式获取子组件，如

const MyComponent = {
  DatePicker: function(props) {
    return <div> 当前日期：{props.currentYear}</div>
  }
}
function PickerContainer() {
  return <MyComponent.DatePicker currentDate = {new Date().getFullYear()} />
}

如antd中的menu组件

import {Menu} from 'antd';
const SubMenu = Menu.SubMenu

本文目的仅仅是为了个人查找阅读等提供方便