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