JSX语法

JSX语法

JSX是什么？

JSX是一种像下面这样的语法：

const element = <h1>Hello, world!</h1>

它是一种JavaScript语法扩展，在React中可以方便地用来描述UI

本质上，JSX为我们提供了创建React元素方法

React.createElement(component, props, ...children)

等价于：

var element = React.createElement(
    "h1",
    null,
    "Hello, world!"
)

JSX代表JS对象

JSX本身也是一个表达式，在编译后，JSX表达式会变成普通的JavaScript对象。

你可以在if语句或for循环中使用JSX，你可以将它赋值给变量，你可以将它作为参数接收，你也可以在函数中返回JSX

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

经过babel会变成下面的js代码：

function test(user) {
    if (user) {
        return React.createElement("h1", null, "Hello, ", formatStr(user), "!");
    };
    return React.createElement("h1", null, "Hello, Stranger.");
}

在JSX中使用JavaScript表达式十分简单，直接在JSX中将JS表达式用大括号括起来即可。例如：

function formatName(user) {
    return user.firstName + ' ' + user.lastName;
}

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

const element = (
    <h1>Hello, {formatName(user)}!</h1>
);

ReactDOM.render(element, document.getElementById('root'))

在JavaScript中，表达式就是一个短语，JavaScript解释器会将其计算出一个结果，常量就是最简单的一类表达式。常用的表达式有：

需要注意的是，if语句以及for循环不是JavaScript表达式，不能直接作为表达式写在{}中，但可以先将其赋值给一个变量（变量是一个JavaScript表达式）

function NumberDescriber(props) {
    let description;
    if (props.number % 2 == 0) {
        description = <strong>even</strong>;
    } else {
        description = <i>odd</i>
    }
    return <div>{props.number} is an {description} number</div>
}

JSX属性值

你可以使用引号将字符串字面量指定为属性值

const element = <div tabIndex="0"></div>;

或者将一个JavaScript表达式嵌在一个大括号中作为属性值：

const element = <img src={user.avatarUrl}></img>;

上面的代码将编译为：

const element = React.createElement("img", { src: user.avatarUrl });

JSX的Children

首先JSX可以是一个不包含Children的empty tag, 如：

const element = <img src={user.avatarUrl} />;

 JSX也可以像HTML标签一样包含Children:

const element = (
    <div>
        <h1>Hello!</h1>
        <h2>Good to see you here.</h2>
    </div>
)

tip: React DOM结点使用小驼峰拼写法给属性命名

例如：class写作className, tabindex写作tabIndex

另外关于JSX的children需要注意的是：

React自定义组件的children是不会像固有的HTML标签的子元素那样自动render的，

class Test extends React.Component {
    render() {
        return (
            <div>
                Here is a list:
                <ul>
                    <li>Item 1</li>
                    <li>Item 2</li>
                </ul>
            </div>
        )
    }
}

ReactDOM.render(
    <Test />,
    document.getElementById('test')
)

参考：

https://www.dazhuanlan.com/2019/08/17/5d576e6046224/?__cf_chl_jschl_tk__=792c755355672d3798f8841e81bf345342ae2b3b-1600327598-0-Afa6bmeRpiephGOIZ33oI-gYaO9kmvRU0GKKJeQrPaXLY4UWxPlyUNPY8RnMCAgBYpv09FjiHlnGZDgALkzmMgdYJoAcFmMX_9ijmcfSdYnfZ5zpw71IlaWlat1tJWiePp_7tBx2jJymZsvkhmCNnn5otIM2YfRbNV0lw2P2yr7AC-eqL_jAMJ0TX3sg4YYJsbnfRriq7wfj3er7uFSDjIgqRZR6Q-Lh754sXdlJqQODgnAV49esxVkSZmaPOM1UUBGSBRdDRosJYF6EgswivFa1ZFVhcrJp74JrEk3AOr5qqRdH-Opt0Y5m42TK--TVjQ