JSX概述

一、JSX定义

JSX 是 JavaScript 的扩展语法，这种 <></> 标签的写法就是 JSX。JSX就是Javascript+XML。即在Javascript里面写XML，因为JSX的这个特性，所以他即具备了Javascript的灵活性，同时又兼具html的语义化和直观性。JSX 编写的组件通过预处理器 babel 解析后，再交给 React 库渲染到指定父容器下，形成最终html页面，供浏览器解析和显示。

二、JSX使用

1. 声明变量，

1	const e = <h1>hello</h1>;

2. 设置属性

1 2	const e = <div tabIndex="0"></div>; // tabIndex指示元素能否聚焦 const e = <img src={user.avatarUrl}></img>;

render() {
  const inputAttrs = {
    type: 'email',
    placeholder: 'Enter your email'
  }

  return <input {...{ attrs: inputAttrs }} />
}

3. 包含多个子元素

const e = (
    <div>
        <h1>Hello!</h1>
        <h2>Shit!</h2>
    </div>
)

4. 作为表达式在return中返回

function getGreeting(user) {
    if (user) {
        return <h1>Hello, {formatName(user)}!</h1>;
    }
    return <h1>Hello, Stranger.</h1>;
}

1
2
3

render() {
    return <FormRender node={ this.form.getRoot() } />
}

import MyComponent from './my-component'

export default {
  render() {
    return <MyComponent>hello</MyComponent>
  },
}

5. 使用JS表达式

// JSX 中调用 js 函数：
function formatName(user) {
    return user.firstName + ' ' + user.lastName;
}

const user = {
    firstName: 'Harper',
    lastName: 'Perez'
};

const element = (
    <h1>
        Hello, {formatName(user)}!
    </h1>
);
// 渲染element元素并加载到父容器root下
ReactDOM.render(
    element,
    document.getElementById('root')
);
// JSX 嵌入 复杂表达式
function NumberList(props) {
    const numbers = props.numbers;
    return (
        <ul>
            {numbers.map((number) =>
                <ListItem key={number.toString()}
                    value={number} />
            )}
        </ul>
    );
}

6. 消息框内html

Message.alert({
  // 此处使用了JSX
  messge: <div>确定要删除<span style="color:red">学习子君Vue系列文章</span>的笔记?</div>,
  type: 'warning'
})

7. 函数式组件

export default {
  // 通过配置functional属性指定组件为函数式组件
  functional: true,
  /**
   * 渲染函数
   * @param {*} h
   * @param {*} context 函数式组件没有this, props, slots等都在context上面挂着
   */
  render(h, context) {
    const { props } = context
    if (props.avatar) {
      return <img src={props.avatar}></img>
    }
    return <img src="default-avatar.png"></img>
  }
}