JSX是什么？

一、JSX是什么？

JSX 是 JavaScript 的扩展语法，这种 标签的写法就是 JSX。JSX 编写的组件通过预处理器 babel 解析后，再交给 React 库渲染到指定父容器下，形成最终html页面。

    Click Me

上面 jsx 写的组件，被 babel 解析下如下代码：

React.createElement(
    MyButton,
    { color: 'blue', shadowSize: 2 },
    'Click Me'
)

---

二、JSX的语法及使用方式

1、基本表达

// jsx声明变量
const element = 
Hello, world!
;

// jsx中设置属性
const element = 
;
const element = ;
const element = ;

// jsx中可以包含多个子元素
const element = (
    

        
Hello!
        
Good to see you here.
    
);

// jsx作为表达式，用在return返回
function getGreeting(user) {
    if (user) {
        return 
Hello, {formatName(user)}!
;
    }
    return 
Hello, Stranger.
;
}

---

2、{}

{} 使得 jsx 可以直接使用 js 语法表达式。

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

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

        Hello, {formatName(user)}!
    
);
// 渲染element元素并加载到父容器root下
ReactDOM.render(
    element,
    document.getElementById('root')
);

# JSX 嵌入 复杂表达式
function NumberList(props) {
    const numbers = props.numbers;
    return (
        

            {numbers.map((number) =>
                
            )}
        
    );
}

3、.

点语法，表示模块中的某一个组件。如下，使用MyComponents模块中的DatePicker组件，点语法非常方便。

import React from 'react';

const MyComponents = {
    DatePicker: function DatePicker(props) {
        return 
Imagine a {props.color} datepicker here.
;
    }
}

function BlueDatePicker() {
    return ;
}

4、...

用展开运算符 ... 来传递整个 props 对象。以下两个组件是等价的：

function App1() {
    return ;
}

function App2() {
    const props = { firstName: 'Ben', lastName: 'Hector' };
    return ;
}

// 用法2：导出需要修改属性kind，其他属性用...来表示
const Button = props => {
    const { kind, ...other } = props;
    const className = kind === "primary" ? "PrimaryButton" : "SecondaryButton";
    return ;
};

const App = () => {
    return (
        

             console.log("clicked!")}>
                Hello World!
            
        

); };

5、大写组件

JSX 写的组件名字，必须以大写字母开始。

import React from 'react';

// 正确！组件需要以大写字母开头：
function Hello(props) {
    // 正确！ 这种 
 的使用是合法的，因为 div 是一个有效的 HTML 标签：
    return 
Hello {props.toWhat}
;
}

function HelloWorld() {
    // 正确！React 知道  是一个组件，因为它是大写字母开头的：
    return ;
}

6、大写变量 & 元素

用大写变量SpecificStory 作为元素名称，运行期间根据 props 属性值，决定加载什么组件，非常方便。

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
    photo: PhotoStory,
    video: VideoStory
};

function Story(props) {
    // 正确！JSX 类型可以是大写字母开头的变量。
    const SpecificStory = components[props.storyType];
    return ;
}

7、Props 默认值为 True

// 下面这两句是等价的

8、props.children

props.children 可以表示任意类型的子元素：

// props.children 是一个简单的未转义字符串 "Hello world!"
function Welcome(props) {
  return 
{props.children}
;
}

Hello world!

// props.children 表示回调函数: {(index) => 
This is item {index} in the list
}
function Repeat(props) {
    let items = [];
    for (let i = 0; i < props.numTimes; i++) {
        items.push(props.children(i));
    }
    return 
{items}
;
}

function ListOfTenThings() {
    return (
        
            {(index) => 
This is item {index} in the list
}
        
    );
}

9、其他表达

// 1、只有showHeader 为true时， Header才会被加载渲染

  {showHeader && 
}
  


// 2、即使 props.messages.length 为0，MessageList也会被加载

    {props.messages.length &&
        
    }


// 3、上面代码修改如下，可符合预期

    {props.messages.length > 0 &&
        
    }


// 4、如下子元素是不会被渲染


{false}
{null}
{undefined}
{true}

// 5、只能把他们转为字符串显示

  My JavaScript variable is {String(myVariable)}.

---

三、用JSX与不用JSX比较

1、使用JSX的组件：

class Hello extends React.Component {
    render() {
        return <div>Hello {this.props.toWhat}</div>;
    }
}

ReactDOM.render(
    <Hello toWhat="World" />,
    document.getElementById('root')
);

2、不使用JSX的组件：

class Hello extends React.Component {
    render() {
        return React.createElement('div', null, `Hello ${this.props.toWhat}`);
    }
}

ReactDOM.render(
    React.createElement(Hello, { toWhat: 'World' }, null),
    document.getElementById('root')
);

---

四、参考链接：

• JSX是什么？